Flutter通知提醒插件alert_banner的使用

alert_banner 是一个强大且美观的通知提醒插件，可以动画显示消息给用户。本文将介绍如何在Flutter项目中使用这个插件。

安装

首先，你需要在你的Flutter项目中添加 alert_banner 插件：

flutter pub add alert_banner

然后，在需要使用该插件的文件中导入它：

import 'package:alert_banner/exports.dart';

使用示例

基本用法

以下是一个简单的例子，展示如何调用 showAlertBanner 函数来显示一个通知提醒：

TextButton(
    onPressed: () => showAlertBanner(
        context,
        () => print("TAPPED"),
        const ExampleAlertBannerChild(),
        alertBannerLocation: AlertBannerLocation.bottom,
    ),
    child: const Text("Show alert"),
),

在这个例子中：

• context 是当前Widget的BuildContext。
• 第二个参数是一个回调函数，当用户点击通知时会被触发。
• 第三个参数是你想要显示的自定义Widget（例如一个文本或图片）。
• alertBannerLocation 指定了通知的位置（顶部或底部）。

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中集成和使用 alert_banner 插件：

import 'package:alert_banner/exports.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 MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Example",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

// Home screen
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // EXAMPLE #1 of showAlertBanner()
            TextButton(
              onPressed: () => showAlertBanner(
                context,
                () => print("TAPPED"),
                const ExampleAlertBannerChild(),
                alertBannerLocation: AlertBannerLocation.top,
              ),
              child: const Text("Show top alert"),
            ),
            const Padding(
              padding: EdgeInsets.all(15),
              child: Text(
                "🔥 Use with your own custom child widget.\n\n🔥 Adjust every field, such as child, durations, anim curves, safe areas, etc.\n\n🔥 Easy to call.\n\n🔥 Dismissible.\n\n🔥 Callback for onTap.",
                textAlign: TextAlign.left,
                style: TextStyle(fontSize: 18),
              ),
            ),
            // EXAMPLE #2 of showAlertBanner()
            TextButton(
              onPressed: () => showAlertBanner(
                context,
                () => print("TAPPED"),
                const ExampleAlertBannerChild(),
                alertBannerLocation: AlertBannerLocation.bottom,
              ),
              child: const Text("Show bottom alert"),
            ),
          ],
        ),
      ),
    );
  }
}

// Example child of alert banner
class ExampleAlertBannerChild extends StatelessWidget {
  const ExampleAlertBannerChild({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.8),
      decoration: const BoxDecoration(
        color: Colors.redAccent,
        borderRadius: BorderRadius.all(
          Radius.circular(5),
        ),
      ),
      child: const Padding(
        padding: EdgeInsets.all(10),
        child: Material(
          color: Colors.transparent,
          child: Text(
            "This is an example notification. It looks awesome!",
            style: TextStyle(color: Colors.white, fontSize: 18),
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何创建一个简单的Flutter应用，并在其中使用 alert_banner 插件来显示不同位置的通知提醒。你可以根据自己的需求调整这些示例代码中的参数和样式。