Flutter消息提示插件toast_plus的使用

Flutter消息提示插件ToastPlus的使用

ToastPlus 是一个用于在 Flutter 应用中显示自定义消息提示的插件。它允许你展示带有平滑动画的临时通知,并且可以根据消息类型进行样式定制。

特性

  • 可定制的消息提示:可以显示带有自定义文本和类型的(成功、危险、信息、警告)消息。
  • 动画过渡:通过 AnimationController 实现平滑的淡入淡出动画。
  • 自动消失:消息提示会在指定的时间后自动消失。
  • 灵活的样式:可以根据不同类型的提示消息自定义背景颜色和图标。
  • 位置支持:支持将消息提示放置在屏幕顶部或底部。
  • 右到左文本方向支持:支持从右向左的语言显示。

安装

在你的 pubspec.yaml 文件中添加 ToastPlus

dependencies:
  flutter:
    sdk: flutter
  toast_plus: ^1.0.8

然后运行 flutter pub get 来安装该包。

使用示例

以下是一个完整的示例代码,展示了如何在 Flutter 应用中使用 ToastPlus 插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ToastPlus 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ToastPlus 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 显示带自定义样式的成功消息提示
                ToastPlus.show(
                  context,
                  message: "成功消息提示,带自定义样式!",
                  type: ToastType.success,
                  textStyle: TextStyle(
                      color: Color.fromARGB(255, 98, 255, 145), fontSize: 23),
                );
              },
              child: Text('显示成功消息提示'),
            ),
            ElevatedButton(
              onPressed: () {
                // 显示带动画图标的危险消息提示
                ToastPlus.show(
                  context,
                  message: "危险消息提示,带动画图标!",
                  type: ToastType.danger,
                  animatedIcon: true,
                );
              },
              child: Text('显示危险消息提示'),
            ),
            ElevatedButton(
              onPressed: () {
                // 显示位于屏幕顶部的信息消息提示
                ToastPlus.show(
                  context,
                  message: "信息消息提示,在顶部!",
                  type: ToastType.info,
                  position: ToastPosition.top,
                );
              },
              child: Text('显示信息消息提示(顶部)'),
            ),
            ElevatedButton(
              onPressed: () {
                // 显示带自定义背景颜色的消息提示
                ToastPlus.show(
                  context,
                  message: "包含自定义小部件的消息提示!",
                  type: ToastType.none,
                  customBackgroundColor: Color.fromARGB(255, 18, 16, 19),
                  borderRadius: 100.0,
                );
              },
              child: Text('显示不带图标的消息提示'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用toast_plus插件来实现消息提示功能的代码示例。toast_plus是一个流行的Flutter插件,用于显示短暂的提示消息(Toast)。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加toast_plus依赖:

dependencies:
  flutter:
    sdk: flutter
  toast_plus: ^3.0.0  # 请检查最新版本号

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

2. 导入包

在你的Dart文件中导入toast_plus包:

import 'package:toast_plus/toast_plus.dart';

3. 初始化Toast

在你的应用入口(通常是main.dart)中初始化Toast:

void main() {
  runApp(MyApp());
  // 初始化ToastPlus
  ToastPlus.init(context);
}

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

注意:ToastPlus.init(context)需要在MaterialAppCupertinoApp构建之前调用,且context应为顶层MaterialAppCupertinoApp的上下文。

4. 使用Toast

现在你可以在任何地方使用ToastPlus来显示消息提示。例如,在按钮点击事件中:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toast Plus Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示Toast消息
            ToastPlus.show(context, "这是一个Toast消息", duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
          },
          child: Text('显示Toast'),
        ),
      ),
    );
  }
}

5. 自定义Toast

你还可以自定义Toast的样式、位置、持续时间等。例如:

ToastPlus.show(
  context,
  "这是一个自定义Toast消息",
  duration: Toast.LENGTH_LONG, // 持续时间长
  gravity: Toast.CENTER,       // 居中显示
  backgroundColor: Colors.green, // 背景颜色
  textColor: Colors.white,     // 文字颜色
  fontSize: 18.0,              // 字体大小
  radius: 8.0,                 // 圆角大小
  margin: EdgeInsets.all(16.0),// 外边距
  padding: EdgeInsets.all(12.0),// 内边距
);

完整示例

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

void main() {
  runApp(MyApp());
  ToastPlus.init(MaterialApp.of(null).context!); // 临时解决方案,实际使用中需确保context正确
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      builder: (context, child) {
        // 确保ToastPlus.init在MaterialApp内部正确初始化
        ToastPlus.init(context);
        return child!;
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toast Plus Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                ToastPlus.show(context, "这是一个Toast消息", duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
              },
              child: Text('显示Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ToastPlus.show(
                  context,
                  "这是一个自定义Toast消息",
                  duration: Toast.LENGTH_LONG,
                  gravity: Toast.CENTER,
                  backgroundColor: Colors.green,
                  textColor: Colors.white,
                  fontSize: 18.0,
                  radius: 8.0,
                  margin: EdgeInsets.all(16.0),
                  padding: EdgeInsets.all(12.0),
                );
              },
              child: Text('显示自定义Toast'),
            ),
          ],
        ),
      ),
    );
  }
}

注意:在真实项目中,确保ToastPlus.init(context)在正确的上下文中被调用。上面的示例代码为了简洁,直接在main函数中调用ToastPlus.init,并传入了一个临时的context。在实际应用中,你可能需要调整这部分代码以确保context的正确性。

回到顶部