Flutter浮动气泡插件float_bubble的使用

float_bubble 是一个受 Tokopedia 应用程序启发的浮动按钮插件。通过将页面包裹在 FloatBubble 小部件中，可以实现类似的效果。

支持我

如果您喜欢这个插件，可以通过 Saweria 支持我。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 float_bubble 插件。

依赖项

首先，在 pubspec.yaml 文件中添加 float_bubble 依赖：

dependencies:
  flutter:
    sdk: flutter
  float_bubble: ^1.0.0

主要代码

import 'package:float_bubble/float_bubble.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isShow = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          NotificationListener<ScrollNotification>(
            child: ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('$index'),
                );
              },
            ),
            onNotification: (notificationInfo) {
              setState(() {
                if (notificationInfo is ScrollStartNotification) {
                  isShow = false;
                }
                if (notificationInfo is ScrollEndNotification) {
                  isShow = true;
                }
              });
              return true;
            },
          ),
          FloatBubble(
            show: isShow,
            child: Container(
              height: 120,
              width: 120,
              child: Stack(
                children: [
                  Container(
                    width: 120,
                    height: 120,
                    child: Align(
                      alignment: Alignment.topRight,
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            isShow = !isShow;
                          });
                        },
                        child: Icon(
                          Icons.cancel,
                          color: Colors.grey,
                        ),
                      ),
                    ),
                  ),
                  Image.network(
                    'https://images.tokopedia.net/img/blog/promo/2021/04/FLOATING-ICON-TOKOPOINTS-150x150-50KB.gif?ect=4g',
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

代码说明

1. 依赖项：在 pubspec.yaml 文件中添加 float_bubble 依赖。
2. 主应用：创建一个 MyApp 类，作为应用的入口点。
3. 主页：创建一个 MyHomePage 类，作为主页。
4. 状态管理：在 _MyHomePageState 中管理 isShow 状态，用于控制浮动气泡的显示和隐藏。
5. 滚动监听：使用 NotificationListener 监听列表的滚动事件，根据滚动事件更新 isShow 状态。
6. 浮动气泡：使用 FloatBubble 小部件创建浮动气泡，并设置其显示状态和子组件。

通过以上步骤，您可以轻松地在 Flutter 应用中实现类似 Tokopedia 的浮动气泡效果。