Flutter弹出提示插件awesome_toster的使用

Flutter弹出提示插件awesome_toster的使用

特性

  • 显示警告、错误、成功提示。
  • 完全自定义的包。

开始使用

  • 在你的应用中导入此包:
    import 'package:awesome_toster/awesome_toster.dart';
    

使用方法

尝试以下代码片段:

AwesomeToster().showOverlay(
  context: context,
  msg: "This is Success Message",
  tosterHeight: 50,
  msgType: MsgType.SUCCESS,
);

完整示例代码

以下是一个完整的示例代码,展示了如何在Flutter应用中使用awesome_toster插件来显示不同类型的提示信息(警告、错误和成功)。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Awesome Toster'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              '按下操作按钮以显示警告弹窗',
            ),
          ],
        ),
      ),
      floatingActionButton: Padding(
        padding: const EdgeInsets.only(left: 30),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            FloatingActionButton(
              backgroundColor: Colors.amber,
              onPressed: () {
                // 显示警告提示
                AwesomeToster().showOverlay(
                  context: context,
                  msg: "This is Warning Message",
                  tosterHeight: 50,
                  prefixIcon: Icons.warning,
                  msgType: MsgType.WARNING,
                );
              },
              tooltip: 'Warning',
              child: const Icon(Icons.warning),
            ),
            FloatingActionButton(
              backgroundColor: Colors.red,
              onPressed: () {
                // 显示错误提示
                AwesomeToster().showOverlay(
                  context: context,
                  msg: "This is Error Message",
                  tosterHeight: 50,
                  prefixIcon: Icons.error,
                  msgType: MsgType.ERROR,
                );
              },
              tooltip: 'Error',
              child: const Icon(Icons.error),
            ),
            FloatingActionButton(
              backgroundColor: Colors.green,
              onPressed: () {
                // 显示成功提示
                AwesomeToster().showOverlay(
                  context: context,
                  msg: "This is Success Message",
                  tosterHeight: 50,
                  msgType: MsgType.SUCCESS,
                );
              },
              tooltip: 'Success',
              child: const Icon(Icons.check),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


awesome_toster 是一个用于在 Flutter 应用中显示简单、美观的 toast 提示的插件。它可以帮助你快速地在应用中显示短暂的提示信息,而不需要用户进行任何交互。以下是如何在 Flutter 项目中使用 awesome_toster 插件的步骤。

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 awesome_toster 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  awesome_toster: ^0.1.0  # 使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 awesome_toster 插件。

import 'package:awesome_toster/awesome_toster.dart';

3. 初始化 AwesomeToster

在使用 AwesomeToster 之前,你需要在应用的顶层组件中初始化它。通常,你可以在 MaterialAppCupertinoAppbuilder 方法中进行初始化。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Toster Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      builder: (BuildContext context, Widget? child) {
        return AwesomeToster(
          child: child!,
        );
      },
    );
  }
}

4. 显示 Toast

现在你可以在任何地方使用 AwesomeToster.of(context) 来显示 toast 提示。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Awesome Toster Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AwesomeToster.of(context).showToast(
              message: 'This is a toast message!',
              toastType: ToastType.success, // 可以设置不同的类型:success, error, info, warning
            );
          },
          child: Text('Show Toast'),
        ),
      ),
    );
  }
}

5. 自定义 Toast

AwesomeToster 提供了多种自定义选项,例如设置 toast 的类型、持续时间、位置等。

AwesomeToster.of(context).showToast(
  message: 'Custom Toast',
  toastType: ToastType.error,
  duration: Duration(seconds: 3), // 设置持续时间
  position: ToastPosition.bottom, // 设置位置:top, center, bottom
);

6. 完整示例

以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Toster Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      builder: (BuildContext context, Widget? child) {
        return AwesomeToster(
          child: child!,
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Awesome Toster Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                AwesomeToster.of(context).showToast(
                  message: 'Success Toast',
                  toastType: ToastType.success,
                );
              },
              child: Text('Show Success Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                AwesomeToster.of(context).showToast(
                  message: 'Error Toast',
                  toastType: ToastType.error,
                );
              },
              child: Text('Show Error Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                AwesomeToster.of(context).showToast(
                  message: 'Info Toast',
                  toastType: ToastType.info,
                );
              },
              child: Text('Show Info Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                AwesomeToster.of(context).showToast(
                  message: 'Warning Toast',
                  toastType: ToastType.warning,
                );
              },
              child: Text('Show Warning Toast'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部