Flutter消息提示插件as_toast

Flutter消息提示插件as_toast_x的使用

as_toast_x 是一个用于Flutter应用的消息提示库，支持多种平台（Android、iOS、Windows、Linux、macOS和Web）。它提供了丰富的自定义选项，可以轻松创建不同类型的Toast消息。

如何使用

添加依赖

在 pubspec.yaml 文件中添加 as_toast_x 依赖：
```
dependencies:
  as_toast_x: ^1.1.2
```

导入库

在 Dart 文件中导入 as_toast_x 库：

import 'package:as_toast_x/as_toast_x.dart';
import 'package:as_toast_x/animations.dart';
import 'package:as_toast_x/extensions.dart';
import 'package:as_toast_x/utils.dart';
import 'package:flutter/material.dart';

完整示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 as_toast_x 插件来显示不同类型的Toast消息。

// ignore_for_file: library_private_types_in_public_api

import 'package:as_toast_x/as_toast_x.dart';
import 'package:as_toast_x/animations.dart';
import 'package:as_toast_x/extensions.dart';
import 'package:as_toast_x/utils.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainScreen(),
    );
  }
}

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

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

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: [
            Image.asset(
              "assets/images/fon.png", // 请确保图片路径正确
              fit: BoxFit.fitHeight,
            ),
            SingleChildScrollView(
              child: Center(
                child: Column(
                  children: [
                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        child: Text(
                          "数据已发送",
                          style: asTextStyle(color: Colors.white, fontWeight: FontWeight.w800, size: 16),
                        ),
                        toastType: ToastType.success,
                        toastDirection: ToastDirection.ltr,
                        iconType: IconType.material,
                      );
                    }, child: const Text("成功")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        child: Text(
                          "请检查网络连接!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.warning,
                      );
                    }, child: const Text("警告")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        child: Text(
                          "用户名或密码错误!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.error,
                      );
                    }, child: const Text("错误")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        toastDirection: ToastDirection.ltr,
                        toastType: ToastType.info,
                        child: Text(
                          "这是信息提示!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                      );
                    }, child: const Text("信息")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        toastDirection: ToastDirection.rtl,
                        child: Text(
                          "已接受!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                      );
                    }, child: const Text("从右到左")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        toastType: ToastType.delete,
                        toastDirection: ToastDirection.btt,
                        child: Text(
                          "所有查询已删除",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                      );
                    }, child: const Text("删除")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        curve: Curves.easeInOutCirc,
                        showingPosition: ShowingPosition.TOP,
                        child: Text(
                          "请检查网络连接!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.warning,
                      );
                    }, child: Text("顶部弹出".toUpperCase())),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        curve: Curves.easeInOutCirc,
                        showingPosition: ShowingPosition.CENTER,
                        child: Text(
                          "请检查网络连接!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.warning,
                      );
                    }, child: Text("居中弹出".toUpperCase())),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        curve: Curves.easeInOutCirc,
                        showingPosition: ShowingPosition.BOTTOM,
                        child: Text(
                          "请检查网络连接!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.warning,
                      );
                    }, child: Text("底部弹出".toUpperCase())),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        child: Text(
                          "已接受 已接受 已接受 已接受 已接受 !",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                      );
                    }, child: const Text("长文本")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        duration: 2000.milliseconds,
                        child: Text(
                          "请检查网络连接!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.warning,
                        blurMode: BlurMode.DIFFERENCE,
                      );
                    }, child: const Text("2秒显示")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        backgroundColor: Colors.blueAccent,
                        child: Text(
                          "用户名或密码错误!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.error,
                        curve: Curves.fastOutSlowIn,
                      );
                    }, child: const Text("蓝色背景")),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        curve: Curves.easeOutBack,
                        child: Text(
                          "已接受!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                      );
                    }, child: Text("Ease Out Back".toUpperCase())),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        curve: Curves.bounceInOut,
                        showingPosition: ShowingPosition.TOP,
                        toastDirection: ToastDirection.rtl,
                        child: Text(
                          "已接受!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                      );
                    }, child: Text("Bounce In Out".toUpperCase())),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        curve: Curves.elasticIn,
                        toastDirection: ToastDirection.btt,
                        child: Text(
                          "已接受!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                      );
                    }, child: Text("Elastic In".toUpperCase())),

                    const SizedBox(height: 8),
                    asButton(context, margin: const EdgeInsets.symmetric(horizontal: 20), onPressed: () {
                      asToastX(
                        context,
                        curve: Curves.easeInSine,
                        showingPosition: ShowingPosition.BOTTOM,
                        duration: 300.milliseconds,
                        animationForce: AnimationForce.hight,
                        child: Text(
                          "请检查网络连接!",
                          style: asTextStyle(size: 16, color: Colors.white, fontWeight: FontWeight.w800),
                        ),
                        toastType: ToastType.warning,
                      );
                    }, child: Text("Ease In Sine".toUpperCase())),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义按钮组件
Widget asButton(BuildContext context, {required VoidCallback onPressed, required Widget child, EdgeInsetsGeometry? margin}) {
  return Container(
    margin: margin,
    child: ElevatedButton(
      onPressed: onPressed,
      child: child,
    ),
  );
}

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

songsunli 1楼•7 天前

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

当然，以下是如何在Flutter项目中使用as_toast_x插件来显示消息提示的代码示例。as_toast_x是一个流行的Flutter插件，用于在应用程序中显示简单而美观的Toast消息。

步骤 1：添加依赖

首先，你需要在pubspec.yaml文件中添加as_toast_x依赖：

dependencies:
  flutter:
    sdk: flutter
  as_toast_x: ^2.0.0  # 确保使用最新版本，版本号可能需要根据实际情况调整

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

步骤 2：导入插件

在你的Dart文件中导入as_toast_x插件：

import 'package:as_toast_x/as_toast_x.dart';

步骤 3：初始化Toast

在应用程序的入口文件（通常是main.dart）中初始化Toast：

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

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

注意：由于AsToastX.init(context)需要在MaterialApp之前调用，所以通常将其放在main函数中。不过，在较新的版本中，AsToastX可能已经不需要显式初始化，具体请参考官方文档。

步骤 4：显示Toast消息

现在你可以在任何地方显示Toast消息了。例如，在按钮点击事件中：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Toast Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示Toast消息
            AsToastX.showToast(
              msg: "Hello, this is a Toast message!",
              gravity: ToastGravity.BOTTOM, // 消息显示位置
              backgroundColor: Colors.black.withOpacity(0.7), // 背景颜色
              textColor: Colors.white, // 文字颜色
              fontSize: 16.0, // 字体大小
              duration: Duration(seconds: 2), // 显示时长
              isCenter: true, // 是否居中显示
            );
          },
          child: Text('Show Toast'),
        ),
      ),
    );
  }
}

完整代码示例

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

void main() {
  runApp(MyApp());
  // 初始化Toast（如果插件需要的话，新版本可能不需要）
  // AsToastX.init(context); // 注意：这里context在main中不可用，实际使用时需要调整
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Toast Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示Toast消息
            AsToastX.showToast(
              msg: "Hello, this is a Toast message!",
              gravity: ToastGravity.BOTTOM, // 消息显示位置
              backgroundColor: Colors.black.withOpacity(0.7), // 背景颜色
              textColor: Colors.white, // 文字颜色
              fontSize: 16.0, // 字体大小
              duration: Duration(seconds: 2), // 显示时长
              isCenter: true, // 是否居中显示
            );
          },
          child: Text('Show Toast'),
        ),
      ),
    );
  }
}

请注意，根据as_toast_x插件的最新版本和API变化，某些参数和方法可能会有所不同。因此，建议查阅插件的官方文档（如果可用）以获取最新和最准确的信息。