Flutter弹出气泡提示插件flappy_popup_bubble的使用

本文将介绍如何在Flutter应用中使用flappy_popup_bubble插件来实现弹出气泡提示。通过这个插件，你可以轻松地在长按某个元素时显示一个气泡菜单。

功能

气泡项具有圆角，并且带有箭头指示。
长按某个元素可以显示一个气泡菜单作为覆盖层。

开始使用

首先，在你的pubspec.yaml文件中添加flappy_popup_bubble依赖：

dependencies:
  flappy_popup_bubble: ^x.x.x

然后运行flutter pub get来获取依赖包。

使用方法

以下是一个简单的示例，展示了如何在Flutter中使用flappy_popup_bubble插件来创建一个弹出气泡菜单。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PopupMenuController _controller = PopupMenuController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _buildPopMenu(
              Container(
                decoration: BoxDecoration(
                    color: Colors.blue, borderRadius: BorderRadius.circular(8)),
                width: 140,
                height: 50,
                alignment: Alignment.center,
                child: const Text(
                  "Long Press",
                  style: TextStyle(color: Colors.white, fontSize: 13),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
              child: GestureDetector(
                behavior: HitTestBehavior.translucent,
                onTap: () {
                  _controller.hide();
                },
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(8)),
                  width: 140,
                  height: 50,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 构建弹出菜单
  Widget _buildPopMenu(Widget child) {
    return PopupMenu(
      controller: _controller,
      showOnLongPress: true,
      translucent: true,
      touchToClose: true,
      menusBuilder: (context, controller) {
        return [
          PopupMenuBtn(
            text: "功能一",
            icon: const Icon(
              Icons.scale,
              color: Colors.white,
              size: 16,
            ),
            onTap: () {
              controller.hide();
            },
          ),
          PopupMenuBtn(
            text: "功能二",
            icon: const Icon(
              Icons.add,
              color: Colors.white,
              size: 16,
            ),
            onTap: () {
              controller.hide();
            },
          ),
        ];
      },
      menuHeight: 40,
      child: child,
    );
  }
}

代码解释

导入库：

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

初始化应用：

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

创建应用根组件：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

定义主页面：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

定义状态类：

class _MyHomePageState extends State<MyHomePage> {
  final PopupMenuController _controller = PopupMenuController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _buildPopMenu(
              Container(
                decoration: BoxDecoration(
                    color: Colors.blue, borderRadius: BorderRadius.circular(8)),
                width: 140,
                height: 50,
                alignment: Alignment.center,
                child: const Text(
                  "Long Press",
                  style: TextStyle(color: Colors.white, fontSize: 13),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
              child: GestureDetector(
                behavior: HitTestBehavior.translucent,
                onTap: () {
                  _controller.hide();
                },
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(8)),
                  width: 140,
                  height: 50,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 构建弹出菜单
  Widget _buildPopMenu(Widget child) {
    return PopupMenu(
      controller: _controller,
      showOnLongPress: true,
      translucent: true,
      touchToClose: true,
      menusBuilder: (context, controller) {
        return [
          PopupMenuBtn(
            text: "功能一",
            icon: const Icon(
              Icons.scale,
              color: Colors.white,
              size: 16,
            ),
            onTap: () {
              controller.hide();
            },
          ),
          PopupMenuBtn(
            text: "功能二",
            icon: const Icon(
              Icons.add,
              color: Colors.white,
              size: 16,
            ),
            onTap: () {
              controller.hide();
            },
          ),
        ];
      },
      menuHeight: 40,
      child: child,
    );
  }
}

更多关于Flutter弹出气泡提示插件flappy_popup_bubble的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼

更多关于Flutter弹出气泡提示插件flappy_popup_bubble的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用flappy_popup_bubble插件来弹出气泡提示的示例代码。这个插件允许你以气泡的形式显示提示信息，非常适合用于引导用户或显示临时通知。

首先，确保你已经在pubspec.yaml文件中添加了flappy_popup_bubble依赖：

dependencies:
  flutter:
    sdk: flutter
  flappy_popup_bubble: ^最新版本号 # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，是一个简单的示例代码，展示如何使用flappy_popup_bubble插件：

import 'package:flutter/material.dart';
import 'package:flappy_popup_bubble/flappy_popup_bubble.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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FlappyPopupBubbleController _bubbleController = FlappyPopupBubbleController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flappy Popup Bubble Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                _showBubble();
              },
              child: Text('Show Bubble'),
            ),
          ],
        ),
      ),
    );
  }

  void _showBubble() {
    _bubbleController.showBubble(
      context: context,
      position: BubblePosition.top, // 气泡位置，可以是top, bottom, left, right
      bubble: Bubble(
        hasArrow: true, // 是否显示箭头
        arrowPosition: BubbleArrowPosition.center, // 箭头位置
        color: Colors.blueAccent, // 气泡颜色
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            '这是一个气泡提示！',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
      onBubbleClicked: () {
        // 点击气泡时的回调
        print('Bubble clicked!');
      },
    );
  }

  @override
  void dispose() {
    _bubbleController.dispose(); // 释放资源
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个按钮。当点击按钮时，会调用_showBubble方法来显示一个气泡提示。

FlappyPopupBubbleController用于控制气泡的显示和隐藏。
Bubble类定义了气泡的外观，包括颜色、是否显示箭头以及箭头位置等。
position参数定义了气泡相对于触发按钮的位置。
onBubbleClicked是一个可选的回调，当用户点击气泡时会触发。

请确保在实际使用中根据需求调整气泡的样式和位置。如果你希望气泡在特定条件下自动隐藏，可以使用_bubbleController.hideBubble()方法。

这个示例提供了一个基础的使用方式，你可以根据需要进一步自定义气泡的样式和行为。