Flutter弹窗提示插件alerter的使用

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

Flutter弹窗提示插件alerter的使用

Alerter

Alerter 是一个 Flutter 插件,用于显示自定义的 Snackbar 或 Toast 提示。它高度可定制且易于集成。

使用方法

要在项目中使用 alerter,首先需要在 pubspec.yaml 文件中添加依赖:

dependencies:
  alerter: ^1.0.0

然后在 Dart 文件中导入 alerter 包:

import 'package:alerter/alerter.dart';

你可以通过以下方式使用 Alerter

void showAlerter() {
  Alerter.show(
    context,
    title: 'This is title',
    message: 'This is a message.',
    icon: Icons.check_circle,
    position: OverlayPosition.bottom,
  );
}

示例代码

以下是一个完整的示例代码,展示了如何在不同的情况下使用 Alerter

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const AlerterExample(),
    );
  }
}

class AlerterExample extends StatefulWidget {
  const AlerterExample({super.key});

  @override
  State<AlerterExample> createState() => _AlerterExampleState();
}

class _AlerterExampleState extends State<AlerterExample> {
  void showTopAlerter() {
    Alerter.show(
      context,
      title: 'Top Alert',
      message: 'This is a message.',
      position: OverlayPosition.top,
      icon: Icons.check_circle,
    );
  }

  void showBottomAlerter() {
    Alerter.show(
      context,
      position: OverlayPosition.bottom,
      title: 'Bottom Alert',
      message: 'This is a message.',
      icon: Icons.check_circle,
    );
  }

  void showTextOnlyAlerter() {
    Alerter.show(
      context,
      title: 'Text Only Alert',
      message: 'This is a message.',
    );
  }

  void showMessageOnlyAlerter() {
    Alerter.show(
      context,
      message: 'This is a message.',
    );
  }

  void showColorfulAlerter() {
    Alerter.show(
      context,
      title: 'Colorful Alert',
      message: 'This is a message.',
      icon: Icons.check_circle,
      backgroundColor: Colors.green,
      iconColor: Colors.black,
      textColor: Colors.white,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alerter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: showTopAlerter,
              child: const Text('Top Alerter'),
            ),
            ElevatedButton(
              onPressed: showBottomAlerter,
              child: const Text('Bottom Alerter'),
            ),
            ElevatedButton(
              onPressed: showTextOnlyAlerter,
              child: const Text('Text Only Alerter'),
            ),
            ElevatedButton(
              onPressed: showMessageOnlyAlerter,
              child: const Text('Message Only Alerter'),
            ),
            ElevatedButton(
              onPressed: showColorfulAlerter,
              child: const Text('Colorful Alerter'),
            ),
          ],
        ),
      ),
    );
  }
}

属性

属性 描述 默认值
context BuildContext Required
message Alerter 消息 Required
title Alerter 标题 null
backgroundColor Alerter 背景颜色 black87
textColor Alerter 文本颜色 white
iconColor Alerter 图标颜色 white
icon Alerter 图标 null
iconSize 图标大小(如果提供了图标) 35
isIconAnimated 图标是否动画 true
duration Alerter 显示时长 OverlayDuration.normal
position Alerter 位置 OverlayPosition.bottom

贡献

欢迎对 alerter 包进行贡献,例如提交 PR 或 Issues。


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

1 回复

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


当然,以下是如何在Flutter中使用alerter插件来创建弹窗提示的示例代码。alerter是一个流行的Flutter包,用于显示自定义的弹窗提示。

首先,确保你已经在pubspec.yaml文件中添加了alerter依赖:

dependencies:
  flutter:
    sdk: flutter
  alerter: ^2.0.0  # 确保版本号是最新的

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

接下来,你可以在你的Flutter应用中使用Alerter控件来显示弹窗提示。以下是一个完整的示例,展示了如何使用alerter

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final AlerterController _alerterController = AlerterController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Alerter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                _showSuccessAlert(context);
              },
              child: Text('Show Success Alert'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _showErrorAlert(context);
              },
              child: Text('Show Error Alert'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _showInfoAlert(context);
              },
              child: Text('Show Info Alert'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _alerterController.hideAll(); // Hide all alerts
        },
        tooltip: 'Hide All Alerts',
        child: Icon(Icons.clear),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: Container(
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  _showCustomAlert(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _showSuccessAlert(BuildContext context) {
    Alerter.show(
      context: context,
      type: AlerterType.success,
      title: 'Success',
      desc: 'This is a success alert!',
      duration: Duration(seconds: 3),
    );
  }

  void _showErrorAlert(BuildContext context) {
    Alerter.show(
      context: context,
      type: AlerterType.error,
      title: 'Error',
      desc: 'This is an error alert!',
      duration: Duration(seconds: 3),
    );
  }

  void _showInfoAlert(BuildContext context) {
    Alerter.show(
      context: context,
      type: AlerterType.info,
      title: 'Info',
      desc: 'This is an info alert!',
      duration: Duration(seconds: 3),
    );
  }

  void _showCustomAlert(BuildContext context) {
    Alerter.show(
      context: context,
      type: AlerterType.custom,
      style: AlerterStyle(
        backgroundColor: Colors.amber,
        animationType: AlerterAnimationType.fromTop,
        isDismissible: true,
        duration: Duration(seconds: 3),
        icon: Icon(Icons.star, color: Colors.black),
      ),
      title: 'Custom',
      desc: 'This is a custom alert!',
    );
  }

  @override
  void dispose() {
    _alerterController.dispose();
    super.dispose();
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含四个按钮,每个按钮都会显示不同类型的弹窗提示(成功、错误、信息和自定义)。

  • _showSuccessAlert 方法显示一个成功类型的弹窗提示。
  • _showErrorAlert 方法显示一个错误类型的弹窗提示。
  • _showInfoAlert 方法显示一个信息类型的弹窗提示。
  • _showCustomAlert 方法显示一个自定义样式的弹窗提示。

我们还添加了一个浮动操作按钮(FAB),用于隐藏所有弹窗提示。

请注意,AlerterController 用于管理弹窗提示的生命周期,在dispose方法中调用_alerterController.dispose()来释放资源。

希望这个示例代码能帮助你理解如何在Flutter中使用alerter插件来创建弹窗提示。

回到顶部