Flutter轻量级通知提示插件flutter_toastr的使用

flutter_toastr 是一个用于在 Flutter 应用中显示非阻塞通知的插件。你可以自定义通知的位置和持续时间。

安装

使用命令行安装

flutter pub add flutter_toastr

在 pubspec.yaml 文件中添加依赖

dependencies:
  flutter_toastr: ^1.0.3

基本用法

在你的 Dart 文件中导入 flutter_toastr 包，并调用 FlutterToastr.show 方法来显示通知。

import 'package:flutter_toastr/flutter_toastr.dart';

// 显示一个短时间的通知，位置在底部
FlutterToastr.show("这是一个短时间的通知", context, duration: FlutterToastr.lengthShort, position: FlutterToastr.bottom);

示例代码

以下是一个完整的示例代码，展示了如何在不同的位置和持续时间内显示通知。

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

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

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

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

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

class _MyAppState extends State<MyHomePage> {
  void _showToast(String msg, {int? duration, int? position}) {
    FlutterToastr.show(msg, context, duration: duration, position: position);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Toastr for non-blocking notifications'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: ElevatedButton(
                child: Text('Show Short Toastr'),
                onPressed: () => _showToast("Show Short Toastr"),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: ElevatedButton(
                child: Text('Show Long Toastr'),
                onPressed: () => _showToast("Show Long Toastr", duration: FlutterToastr.lengthLong),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: ElevatedButton(
                child: Text('Show Bottom Toastr'),
                onPressed: () => _showToast("Show Bottom Toastr", position: FlutterToastr.bottom),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: ElevatedButton(
                child: Text('Show Center Toastr'),
                onPressed: () => _showToast("Show Center Toastr", position: FlutterToastr.center),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: ElevatedButton(
                child: Text('Show Top Toastr'),
                onPressed: () => _showToast("Show Top Toastr", position: FlutterToastr.top),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

1. 导入包：首先在 Dart 文件中导入 flutter_toastr 包。
2. 定义 _showToast 方法：该方法用于显示通知，接受消息、持续时间和位置作为参数。
3. 创建按钮：在 build 方法中创建多个按钮，每个按钮点击时会调用 _showToast 方法并传入不同的参数。
4. 显示通知：通过调用 FlutterToastr.show 方法显示通知，可以设置消息内容、持续时间和位置。

通过以上步骤，你可以在 Flutter 应用中轻松地使用 flutter_toastr 插件来显示非阻塞通知。