Flutter通知公告插件bulletin的使用

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

Flutter通知公告插件bulletin的使用

Flutter包用于在您的应用程序中显示通知公告。

Bulletin

显示一些❤️并⭐此仓库

||

特性

  • ✅ 显示闪卡
  • ✅ 弹出卡片
  • ✅ 动画闪卡
  • ✅ 完全可自定义

开始使用

在您的项目中包含此插件:

dependencies:
  bulletin: <最新版本>

运行 pub get 并获取包。

示例

转到 pub.dev 的示例部分查看完整的示例代码。

在 GitHub 中,前往 example/lib/main.dart 查看完整的示例代码。

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

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

class MyApp extends StatelessWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            "Example",
          ),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 20),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                "使用bulletin小部件的不同内置属性",
                style: TextStyle(
                  fontSize: 20,
                ),
              ),
            ),
            const SizedBox(height: 10),
            example1(),
            const SizedBox(height: 20),
            example2(),
            const SizedBox(height: 20),
            example3(),
            const SizedBox(height: 20),
            const Divider(),
            const SizedBox(height: 20),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                "完全自定义的bulletin小部件",
                style: TextStyle(
                  fontSize: 20,
                ),
              ),
            ),
            const SizedBox(height: 10),
            example4(),
          ],
        ),
      ),
    );
  }

  // 这是一个例子,其中使用了通用图标。
  // 持续时间为4秒。
  Center example1() {
    return Center(
      child: Bulletin(
        icon: const Icon(
          Icons.mic_outlined,
          size: 20,
        ),
        gapDuration: const Duration(seconds: 4),
        children: [
          BulletinItem(
            text:
                "1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 1 的点击事件被调用");
            },
          ),
          BulletinItem(
            text:
                "2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 2 的点击事件被调用");
            },
          ),
          BulletinItem(
            text:
                "3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 3 的点击事件被调用");
            },
          ),
        ],
      ),
    );
  }

  // 这是一个例子,其中在BulletinItem中指定了图标。
  Center example2() {
    return Center(
      child: Bulletin(
        backgroundColor: const Color(0xffFFF3D0),
        gapDuration: const Duration(seconds: 2),
        children: [
          BulletinItem(
            icon: const Icon(
              Icons.music_note,
              size: 20,
            ),
            text:
                "1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 1 的点击事件被调用");
            },
          ),
          BulletinItem(
            icon: const Icon(
              Icons.mic_sharp,
              size: 20,
            ),
            text:
                "2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 2 的点击事件被调用");
            },
          ),
          BulletinItem(
            icon: const Icon(
              Icons.masks_rounded,
              size: 20,
            ),
            text:
                "3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 3 的点击事件被调用");
            },
          ),
        ],
      ),
    );
  }

  Center example3() {
    return Center(
      child: Bulletin(
        backgroundColor: const Color.fromARGB(255, 132, 210, 252),
        gapDuration: const Duration(seconds: 2),
        showCloseButton: false,
        children: [
          BulletinItem(
            icon: const Icon(
              Icons.music_note,
              size: 20,
            ),
            text:
                "1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 1 的点击事件被调用");
            },
          ),
          BulletinItem(
            icon: const Icon(
              Icons.mic_sharp,
              size: 20,
            ),
            text:
                "2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 2 的点击事件被调用");
            },
          ),
          BulletinItem(
            icon: const Icon(
              Icons.masks_rounded,
              size: 20,
            ),
            text:
                "3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 3 的点击事件被调用");
            },
          ),
        ],
      ),
    );
  }

  Center example4() {
    return Center(
      child: Bulletin(
        backgroundColor: const Color.fromARGB(255, 255, 229, 208),
        gapDuration: const Duration(seconds: 3),
        textStyle: GoogleFonts.getFont(
          "Red Hat Mono",
          textStyle: const TextStyle(fontSize: 12),
        ),
        children: [
          BulletinItem(
            icon: const Icon(
              Icons.mic_sharp,
              size: 20,
            ),
            text:
                "2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 2 的点击事件被调用");
            },
          ),
          BulletinItem(
            icon: const Icon(
              Icons.music_note,
              size: 20,
            ),
            text:
                "1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 1 的点击事件被调用");
            },
          ),
          BulletinItem(
            icon: const Icon(
              Icons.masks_rounded,
              size: 20,
            ),
            text:
                "3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
            onTap: () {
              debugPrint("BulletinItem 3 的点击事件被调用");
            },
          ),
        ],
        closeButton: Container(
          padding: const EdgeInsets.all(4),
          margin: const EdgeInsets.all(3),
          child: const Icon(
            Icons.close_rounded,
            size: 12,
            color: Colors.black,
          ),
          decoration: const BoxDecoration(
            color: Colors.deepOrangeAccent,
            borderRadius: BorderRadius.all(Radius.circular(5)),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter通知公告插件bulletin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter通知公告插件bulletin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用bulletin插件来实现通知公告功能的示例代码。bulletin是一个用于在Flutter应用中显示通知公告的插件。请注意,实际使用时,你需要确保已经添加了该插件到你的pubspec.yaml文件中。

首先,确保在pubspec.yaml中添加依赖:

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

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

接下来是一个简单的示例代码,展示如何使用bulletin插件来显示通知公告:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final BulletinController _bulletinController = BulletinController();

  @override
  void initState() {
    super.initState();
    // 初始化时显示一个公告
    _showBulletin();
  }

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

  void _showBulletin() {
    _bulletinController.showBulletin(
      context: context,
      alignment: Alignment.topCenter,
      duration: Duration(seconds: 5),
      itemBuilder: (context, index) {
        return BulletinItem(
          title: Text('这是一个通知公告标题'),
          content: Text('这是通知公告的内容部分。'),
          trailing: IconButton(
            icon: Icon(Icons.close),
            onPressed: () {
              _bulletinController.dismissBulletin();
            },
          ),
        );
      },
      itemCount: 1,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bulletin Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                _showBulletin();
              },
              child: Text('显示公告'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个按钮用于触发通知公告的显示。公告包括一个标题、内容和一个关闭按钮。BulletinController用于控制公告的显示和隐藏。

  • BulletinController实例化后,可以通过showBulletin方法来显示公告。
  • alignment属性用于设置公告的位置。
  • duration属性用于设置公告显示的持续时间。
  • itemBuilder用于构建公告项,可以返回自定义的Widget。
  • itemCount表示公告项的数量。

运行这个示例,当你点击“显示公告”按钮时,将会看到一个顶部居中的通知公告,5秒后自动消失,你也可以点击关闭按钮来手动关闭公告。

确保你使用的bulletin插件版本与示例代码兼容,并根据需要进行调整。

回到顶部