Flutter后台消息气泡显示插件background_bubbles的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter后台消息气泡显示插件background_bubbles的使用

注意事项

以下代码片段演示了如何在Flutter应用中使用动画创建覆盖整个屏幕的背景气泡。

简单的方法

import 'package:background_bubbles/background_bubbles.dart';

BubblesAnimation(
        backgroundColor: Colors.white,
        particleColor: Colors.indigo,
        particleCount: 500,
        particleRadius: 5,
        widget: Center(child: Text("Animated Bubbles")))

使用说明

要在Flutter应用中使用动画创建覆盖整个屏幕的背景气泡，下面是一个登录界面的设计示例供参考。

示例代码

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

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

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

  // 此小部件是您的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter背景气泡',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: BubblesAnimation(
            backgroundColor: Colors.white,
            particleColor: Colors.indigo,
            particleCount: 500,
            particleRadius: 5,
            widget: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 15, right: 15, top: 5),
                              child: TextFormField(
                                  decoration: const InputDecoration(
                                    border: InputBorder.none,
                                    labelText: '邮箱',
                                  )))),
                    ),
                  ),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 15, right: 15, top: 5),
                              child: TextFormField(
                                  decoration: const InputDecoration(
                                    border: InputBorder.none,
                                    labelText: '密码',
                                  )))),
                    ),
                  ),
                  Padding(
                      padding: const EdgeInsets.all(50),
                      child: SizedBox(
                        height: 50,
                        width: double.infinity,
                        child: ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.amberAccent,
                              // padding:
                              //     EdgeInsets.symmetric(horizontal: 50, vertical: 20),
                              textStyle: const TextStyle(
                                  fontSize: 20, fontWeight: FontWeight.bold)),
                          child: const Text(
                            '登录',
                            style:
                            TextStyle(color: Colors.black, fontSize: 18.0),
                          ),
                        ),
                      )),
                ],
              ),
            )));
  }
}

更多关于Flutter后台消息气泡显示插件background_bubbles的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter后台消息气泡显示插件background_bubbles的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于如何在Flutter应用中使用background_bubbles插件来显示后台消息气泡，以下是一个简单的代码示例。background_bubbles插件允许应用在后台运行时显示通知气泡，这对于即时消息应用等场景非常有用。

首先，确保你的Flutter项目已经添加了background_bubbles依赖。在你的pubspec.yaml文件中添加以下依赖：

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

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

接下来，你需要在你的应用中配置和使用background_bubbles。以下是一个基本的示例，展示了如何初始化插件并在收到消息时显示气泡通知。

1. 初始化插件

在你的主文件（通常是main.dart）中，初始化BackgroundBubbles插件。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  BackgroundBubbles.initialize();
  runApp(MyApp());
}

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

2. 配置Android权限（如果需要）

确保在AndroidManifest.xml中配置了必要的权限，例如显示通知的权限。

<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>

3. 显示气泡通知

当你收到新的消息时，你可以使用BackgroundBubbles的showBubble方法来显示气泡通知。

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

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

class _MyHomePageState extends State<MyHomePage> {
  void simulateNewMessage() {
    // 模拟收到新消息
    Map<String, dynamic> messageData = {
      'title': '新消息',
      'body': '这是一条测试消息',
      'payload': {'userId': '12345'}, // 你可以传递任何额外的数据
    };

    // 显示气泡通知
    BackgroundBubbles.showBubble(
      title: messageData['title'],
      body: messageData['body'],
      payload: messageData['payload'],
      onTap: () {
        // 用户点击气泡时的回调
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => ChatScreen(userId: messageData['payload']['userId'])),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: simulateNewMessage,
          child: Text('模拟新消息'),
        ),
      ),
    );
  }
}

class ChatScreen extends StatelessWidget {
  final String userId;

  ChatScreen({required this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天屏幕'),
      ),
      body: Center(
        child: Text('与用户 $userId 聊天'),
      ),
    );
  }
}

在上面的代码中，simulateNewMessage方法模拟了收到一条新消息，并使用BackgroundBubbles.showBubble方法显示了一个气泡通知。当用户点击气泡时，它会导航到一个新的聊天屏幕。

注意事项

  1. 后台运行：确保你的应用在后台运行时仍然可以接收和处理消息。这可能需要配置一些后台任务或服务，具体取决于你的平台（Android/iOS）。
  2. 消息处理：实际应用中，消息通常来自服务器，因此你需要在后台监听和处理这些消息。
  3. 权限管理：在Android和iOS上，显示通知通常需要用户授予权限。确保你的应用请求并处理了这些权限。

以上代码提供了一个基本的示例，展示了如何在Flutter应用中使用background_bubbles插件来显示后台消息气泡。根据你的具体需求，你可能需要进一步定制和扩展这些功能。

回到顶部