[Flutter] Use flutter_floating to realize the Flutter floating window solution

I. Introduction

In mobile application development, a floating window is a common UI element that can float on the application interface to provide users with a way to quickly access certain functions. However, implementing a floating window in Flutter is not a simple matter, because various factors need to be considered, such as the position, size, style, and behavior of the floating window. This article will introduce how to use the powerful library flutter_floating to implement Flutter floating windows.

By reading this article, you will be able to master the following knowledge:

• Application Scenarios and Implementation Difficulties of Flutter Floating Window
• Functional characteristics and conditions of use of flutter_floating
• How to install and configure flutter_floating
• How to use flutter_floating to create and customize floating windows

Are you eager to become a Flutter expert with more tips and best practices? We have great news for you! Flutter from zero to one basic entry to the application line of the whole strategy is waiting for you to join! This column contains all the resources you need to learn Flutter, including code samples and in-depth analysis. The content of the column will continue to be updated, and the price will increase accordingly. Join now and enjoy the best price! In addition, we also have a dedicated discussion group, you can click here to join our discussion group to communicate and learn with other Flutter learners. Let's start our Flutter learning journey today!

2. The requirements and challenges of Flutter floating window and the introduction of flutter_floating

1. Application scenarios of Flutter floating window

Overlay windows are widely used in many mobile applications to provide quick access to certain functions. For example, a music player app might have a floating playback controller that users can control to play and pause music at any time; a social app might have a floating message button that users can quickly view and reply to new messages.

2. Difficulties in implementing Flutter floating window

Although floating windows are common in mobile apps, implementing them in Flutter presents some challenges. First of all, Flutter's layout system is based on the widget tree, which means that each widget must have a parent widget, and its position is relative to the parent widget. This conflicts with the feature of the floating window - which can be moved freely on the screen. Secondly, the floating window usually needs to respond to the user's touch events, such as dragging, clicking, etc., which requires a deep understanding of Flutter's gesture system.

3. Functional characteristics of flutter_floating

flutter_floating is a library dedicated to implementing floating windows in Flutter. It provides a global floating window management mechanism and supports various callback monitoring, such as moving, pressing, etc. It also supports customizing whether to save the position information of the floating window, supports single page and global use, and can insert N floating windows. In addition, it also supports custom no-swipe areas, such as sliding within the area from the top 50 to the bottom, etc. It also has a complete log system, which allows you to view the logs corresponding to different floating windows.

4. Conditions of use of flutter_floating

Using flutter_floating requires Flutter 3.0.0 or later and Dart SDK 3.0.0 or later. Also, the current version of flutter_floating is 1.0.8.

3. Installation and configuration of flutter_floating

1. How to install flutter_floating

To use flutter_floating in a Flutter project, you first need to add the dependency of flutter_floating to the project's pubspec.yaml file. Open the pubspec.yaml file, find the dependencies section, and add the following code:

dependencies:
  flutter:
    sdk: flutter
  flutter_floating: ^1.0.8

Then, run the command in the terminal flutter pub get, and Flutter will automatically download and install flutter_floating.

2. How to configure flutter_floating

The configuration of flutter_floating is mainly done through the parameters passed in when creating the floating window. The following are some commonly used parameters:

• slideType: The sliding type of the floating window, such as sliding on the right and bottom.
• isPosCache: Whether to save the position information of the floating window. After it is enabled, the floating window will keep its previous position when calling is called Floating.closeagain .Floating.open
• isShowLog: Whether to display logs. After enabling, you can view various behaviors of the floating window, such as moving, pressing, etc.

Ok, I'm going to move on to the rest of the chapters. The following is the content of the fourth, fifth and sixth chapters:

4. Example of using flutter_floating

1. Create a simple floating window

To create a floating window, we first need to create a Floatingobject. Here is a simple example:

Floating floating = Floating(
  Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
  slideType: FloatingSlideType.onRightAndBottom,
  isShowLog: true,
);

In this example, we create a red square hover window. The size of the floating window is 100x100, the sliding type is onRightAndBottom, and logging is enabled.

Then, we can floating.open()open the floating window by calling the method.

2. Customize the style and behavior of the floating window

flutter_floating provides many parameters that can be used to customize the style and behavior of the floating window. For example, we can slideTypechange the sliding type of the floating window through the parameter, isPosCachedecide whether to save the position information of the floating window through the parameter, and isShowLogdecide whether to display the log through the parameter.

Here is a more complex example showing how to use these parameters:

Floating floating = Floating(
  Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
  slideType: FloatingSlideType.onLeftAndTop,
  isPosCache: true,
  isShowLog: true,
  slideTopHeight: 50,
  slideBottomHeight: 50,
);

In this example, we create a red square hover window. The size of the floating window is 100x100, the sliding type is onLeftAndTop, the location information saving and log display are enabled, and the sliding boundary is set, the floating window can slide to a position 50 from the top and 50 from the bottom.

3. Add interactive functions in the floating window

We can add various interactive functions in the floating window. For example, we can add a button, when the user clicks the button, the floating window will display a prompt message.

Here is an example:

Floating floating = Floating(
  GestureDetector(
    onTap: () {
    
    
      print('You tapped the floating window!');
    },
    child: Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
  ),
  slideType: FloatingSlideType.onRightAndBottom,
  isShowLog: true,
);

In this example, we add one to the overlay GestureDetector. When the user clicks on the floating window, the program will print a prompt message.

V. Summary

This article introduces how to use flutter_floating to implement Flutter floating window. We first introduced the application scenarios and implementation difficulties of the Flutter floating window, and then introduced the functional characteristics and usage conditions of flutter_floating. Next, we explained how to install and configure flutter_floating, and how to use flutter_floating to create and customize floating windows.

Are you curious about Flutter and want to learn more about it? Then, Flutter from zero to one basic introduction to application launch guide will be your best choice! Here, you can find comprehensive Flutter learning resources, including code samples and in-depth analysis. Are you wondering how to build apps with Flutter? All the answers are in our column! Don't hesitate anymore, the content of the column will continue to be updated, and the price will increase accordingly. Join now and enjoy the best price! Let's explore the world of Flutter together! Want to know more? Click here to view the Flutter Developer 101 Getting Started booklet column guide . In addition, we also have a dedicated discussion group, you can click here to join our discussion group to communicate and learn with other Flutter learners.