Flutter弹窗通知插件popup_banner的使用

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

Flutter弹窗通知插件popup_banner的使用

popup_banner 是一个用于显示横幅滑块的插件，通过模态对话框实现。我们可以设置图片位置、自动滑动设置、点指示器等。

Popup Banner

特性

  • 可定制的弹窗
  • 自定义关闭按钮
  • 加载网络和本地图片
  • 自动滑动和定时器
  • 自定义点指示器位置和颜色

开始使用

首先，你需要将 popup_banner 添加为项目的依赖项。

在 pubspec.yaml 文件中添加：

dependencies:
  popup_banner: ^1.0.0

然后运行 flutter packages get。

示例项目

在 example 文件夹中有一个详细的示例项目，你可以直接运行并测试。以下是一些代码片段。

默认弹窗

Default Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  onClick: (index) {
    debugPrint("CLICKED $index");
  },
).show();

隐藏点指示器的弹窗

Hide Dots Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  useDots: false,
  onClick: (index) {
    debugPrint("CLICKED $index");
  },
).show();

自定义点指示器的弹窗

Customize Dots Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  dotsAlignment: Alignment.bottomCenter,
  dotsColorActive: Colors.blue,
  dotsColorInactive: Colors.grey.withOpacity(0.5),
  onClick: (index) {
    debugPrint("CLICKED $index");
  },
).show();

禁用自动滑动和自定义关闭按钮的弹窗

Disable Auto Slide & Custom Close Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  autoSlide: false,
  customCloseButton: ElevatedButton(
    onPressed: () => Navigator.pop(context),
    style: ElevatedButton.styleFrom(
      primary: Colors.blue,
    ),
    child: const Text(
      "Close",
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
  onClick: (index) {
    debugPrint("CLICKED $index");
  },
).show();

本地资源弹窗

Local Asset Popup

PopupBanner(
  context: context,
  images: [
    "assets/images/popup-banner-local-image.jpg",
    "assets/images/popup-banner-local-image2.jpg",
    "assets/images/popup-banner-local-image3.jpeg",
    "assets/images/popup-banner-local-image4.jpg"
  ],
  fromNetwork: false,
  onClick: (index) {},
).show();

完整示例代码

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> images = [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ];

  List<String> imagesLocal = [
    "assets/images/popup-banner-local-image.jpg",
    "assets/images/popup-banner-local-image2.jpg",
    "assets/images/popup-banner-local-image3.jpeg",
    "assets/images/popup-banner-local-image4.jpg"
  ];

  void showDefaultPopup() {
    PopupBanner(
      context: context,
      images: images,
      onClick: (index) {
        debugPrint("CLICKED $index");
      },
    ).show();
  }

  void showHideDotsPopup() {
    PopupBanner(
      context: context,
      images: images,
      useDots: false,
      onClick: (index) {
        debugPrint("CLICKED $index");
      },
    ).show();
  }

  void showCustomizeDots() {
    PopupBanner(
      context: context,
      images: images,
      dotsAlignment: Alignment.bottomCenter,
      dotsColorActive: Colors.blue,
      dotsColorInactive: Colors.grey.withOpacity(0.5),
      onClick: (index) {
        debugPrint("CLICKED $index");
      },
    ).show();
  }

  void showNonactiveSlideCustomClose() {
    PopupBanner(
      context: context,
      images: images,
      autoSlide: false,
      customCloseButton: ElevatedButton(
        onPressed: () => Navigator.pop(context),
        style: ElevatedButton.styleFrom(
          primary: Colors.blue,
        ),
        child: const Text(
          "Close",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      onClick: (index) {
        debugPrint("CLICKED $index");
      },
    ).show();
  }

  void showFromLocal() {
    PopupBanner(
      context: context,
      images: imagesLocal,
      fromNetwork: false,
      onClick: (index) {},
    ).show();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buttonWidget(
              title: "Default Popup",
              onClick: () => showDefaultPopup(),
            ),
            _buttonWidget(
              title: "Hide Dots Popup",
              onClick: () => showHideDotsPopup(),
            ),
            _buttonWidget(
              title: "Customize Dots Popup",
              onClick: () => showCustomizeDots(),
            ),
            _buttonWidget(
              title: "Disable Auto Slide & Custom Close Popup",
              onClick: () => showNonactiveSlideCustomClose(),
            ),
            _buttonWidget(
              title: "Local Asset Popup",
              onClick: () => showFromLocal(),
            )
          ],
        ),
      ),
    );
  }

  Widget _buttonWidget({
    required String title,
    required VoidCallback onClick,
  }) {
    return ElevatedButton(
      onPressed: () => onClick(),
      style: ElevatedButton.styleFrom(
        primary: Colors.blue,
      ),
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }
}

贡献

  • 如果你 发现了一个错误，请打开一个 issue。
  • 如果你 有一个功能请求，请打开一个 issue。
  • 如果你 想贡献代码，请提交一个 pull request。

版本兼容性

请参阅 CHANGELOG 以了解所有破坏性和非破坏性的更改。

由 Yusril Rapsanjani 制作，版权所有。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter应用中使用popup_banner插件来实现弹窗通知的示例代码。popup_banner是一个流行的Flutter插件，用于在应用的顶部或底部显示非阻塞的通知横幅。

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

dependencies:
  flutter:
    sdk: flutter
  popup_banner: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter应用中按照以下步骤使用popup_banner插件：

  1. 导入包：

在你的Dart文件中导入popup_banner包：

import 'package:flutter/material.dart';
import 'package:popup_banner/popup_banner.dart';
  1. 创建横幅内容：

你可以创建一个简单的横幅内容，例如一个文本：

Widget _createBannerContent() {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(10.0),
    ),
    child: Text(
      '这是一个通知横幅',
      style: TextStyle(color: Colors.white, fontSize: 16.0),
    ),
  );
}
  1. 显示横幅：

在你的Scaffold或任何其他Widget中，你可以使用PopupBanner的showBanner方法来显示横幅。下面是一个完整的示例：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PopupBanner 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示横幅
              PopupBanner.showBanner(
                context: context,
                content: _createBannerContent(),
                duration: Duration(seconds: 3), // 显示时间
                position: BannerPosition.top, // 显示位置
                onTap: () {
                  // 点击横幅时的回调
                  print('横幅被点击了');
                },
              );
            },
            child: Text('显示横幅'),
          ),
        ),
      ),
    );
  }
}

在这个示例中，当用户点击按钮时，会在屏幕顶部显示一个蓝色的横幅，横幅内容为“这是一个通知横幅”，并且会在3秒后自动消失。如果用户点击横幅，会在控制台打印“横幅被点击了”。

这样，你就成功地在Flutter应用中使用popup_banner插件实现了弹窗通知功能。根据需求，你可以自定义横幅的内容、样式、显示位置和持续时间等。

回到顶部