Flutter教育类通知横幅插件edu_alert_banner的使用

特性

此插件用于在Flutter应用中显示教育类通知横幅。它可以帮助开发者快速实现类似课程更新、活动通知等功能。

开始使用

1. 添加依赖

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  edu_alert_banner: ^1.0.0  # 请根据实际版本号替换

然后运行以下命令以安装依赖：

flutter pub get

使用方法

导入插件

首先，在您的Dart文件中导入插件：

import 'package:edu_alert_banner/edu_alert_banner.dart';

基本用法

显示通知横幅

通过调用EduAlertBanner.show()方法来显示通知横幅。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 控制是否显示横幅
  bool _showBanner = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('教育类通知横幅示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 显示横幅
                EduAlertBanner.show(
                  context: context,
                  message: "新课程上线啦！快来学习吧！", // 横幅内容
                  duration: Duration(seconds: 5), // 横幅持续时间
                  actionText: "查看详情", // 按钮文字
                  onActionPressed: () {
                    print("用户点击了查看详情按钮");
                  },
                );
              },
              child: Text("显示通知横幅"),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 隐藏横幅（如果需要手动隐藏）
                EduAlertBanner.hide(context);
              },
              child: Text("隐藏通知横幅"),
            ),
          ],
        ),
      ),
    );
  }
}

高级用法

自定义横幅样式

可以通过传递自定义参数来自定义横幅的外观。例如：

EduAlertBanner.show(
  context: context,
  message: "系统维护通知",
  backgroundColor: Colors.orange[300], // 背景颜色
  textColor: Colors.white, // 文字颜色
  borderRadius: BorderRadius.circular(10), // 圆角半径
  padding: EdgeInsets.all(16), // 内边距
);

注意事项

1. 上下文：确保在show()方法中传递正确的BuildContext。
2. 生命周期管理：如果您在Navigator堆栈发生变化时调用hide()方法，请确保不会出现异常。
3. 依赖项版本：请根据实际情况选择合适的插件版本。

完整示例代码

以下是完整的示例代码，您可以直接复制到项目中运行：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _showBanner = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('教育类通知横幅示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                EduAlertBanner.show(
                  context: context,
                  message: "新课程上线啦！快来学习吧！",
                  duration: Duration(seconds: 5),
                  actionText: "查看详情",
                  onActionPressed: () {
                    print("用户点击了查看详情按钮");
                  },
                );
              },
              child: Text("显示通知横幅"),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                EduAlertBanner.hide(context);
              },
              child: Text("隐藏通知横幅"),
            ),
          ],
        ),
      ),
    );
  }
}