Flutter边缘弹窗提示插件edge_alert的使用

简介

edge_alert 是一个用于在屏幕顶部或底部显示提示信息的 Flutter 插件。它可以帮助开发者快速实现类似通知栏的效果。

如何使用

1. 添加依赖

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

dependencies:
  edge_alert: ^0.0.1

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

2. 导入包

在需要使用的 Dart 文件中导入 edge_alert 包：

import 'package:edge_alert/edge_alert.dart';

3. 使用示例

通过调用 EdgeAlert.show() 方法来显示提示信息。以下是一个完整的示例代码：

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final longDesc =
      "这是一个非常长的描述 这是一个非常长的描述 这是一个非常长的描述 这是一个非常长的描述 这是一个非常长的描述";

  // 显示普通提示
  void _showAlert(bool isFromTop) {
    EdgeAlert.show(
      context,
      title: '标题',
      description: '描述',
      gravity: isFromTop ? EdgeAlert.TOP : EdgeAlert.BOTTOM,
    );
  }

  // 显示彩色提示
  void _colorfullAlert() {
    EdgeAlert.show(
      context,
      title: '标题',
      description: '描述',
      gravity: EdgeAlert.TOP,
      backgroundColor: Colors.red,
    );
  }

  // 显示长描述提示
  void _longDescAlert() {
    EdgeAlert.show(
      context,
      title: '标题',
      description: longDesc,
      gravity: EdgeAlert.TOP,
    );
  }

  // 显示不同图标提示
  void _differentIcon() {
    EdgeAlert.show(
      context,
      title: '标题',
      description: '描述',
      gravity: EdgeAlert.TOP,
      icon: Icons.disc_full,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 按钮：从顶部显示提示
            ElevatedButton(
              onPressed: () {
                _showAlert(true);
              },
              child: Text('从顶部显示提示'),
            ),
            // 按钮：从底部显示提示
            ElevatedButton(
              onPressed: () {
                _showAlert(false);
              },
              child: Text('从底部显示提示'),
            ),
            // 按钮：显示彩色提示
            ElevatedButton(
              onPressed: () {
                _colorfullAlert();
              },
              child: Text('彩色提示'),
            ),
            // 按钮：显示长描述提示
            ElevatedButton(
              onPressed: () {
                _longDescAlert();
              },
              child: Text('长描述提示'),
            ),
            // 按钮：显示不同图标提示
            ElevatedButton(
              onPressed: () {
                _differentIcon();
              },
              child: Text('不同图标提示'),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

以下是 EdgeAlert.show() 方法支持的主要参数及其说明：

效果展示

启发来源

该插件灵感来源于 Tapadoo/Alerter。

许可证

本项目采用 MIT 许可证。

MIT License