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

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

插件介绍

edge_alerts 是一个用于在Flutter应用中显示顶部或底部弹窗提示的插件。它提供了简洁的方式来展示警告信息，适用于需要快速通知用户的应用场景。

安装插件

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

dependencies:
  edge_alerts: ^0.0.1

然后运行 flutter pub get 来安装插件。

示例代码

下面是一个完整的示例代码，展示了如何使用 edge_alerts 插件来创建不同的弹窗提示。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Edge Alert',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Edge Alert'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title});
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showAlert(Gravity gravity) {
    edgeAlert(
      context,
      title: 'Title',
      description: 'Description',
      gravity: gravity,
      icon: Icons.hail,
    );
  }

  void _colorfullAlert() {
    edgeAlert(
      context,
      title: 'Title',
      description: 'Description',
      gravity: Gravity.top,
      backgroundColor: Colors.red,
    );
  }

  void _longDescAlert() {
    edgeAlert(
      context,
      title: 'Title',
      description: 'This is very long description This is very long description This is very long description This is very long description This is very long description',
      gravity: Gravity.top,
    );
  }

  void _differentIcon() {
    edgeAlert(
      context,
      title: 'Title',
      description: 'Description',
      gravity: Gravity.top,
      icon: Icons.disc_full,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () =&gt; _showAlert(Gravity.top),
              child: Text('From Top'),
            ),
            ElevatedButton(
              onPressed: () =&gt; _showAlert(Gravity.bottom),
              child: Text('From Bottom'),
            ),
            ElevatedButton(
              onPressed: _colorfullAlert,
              child: Text('Colorfull Alert'),
            ),
            ElevatedButton(
              onPressed: _longDescAlert,
              child: Text('Long Description'),
            ),
            ElevatedButton(
              onPressed: _differentIcon,
              child: Text('Different Icon'),
            ),
          ],
        ),
      ),
    );
  }
}