Flutter轻量级提示框插件ftoast的使用

ftoast 是一个简单且美观的 Toast 插件，帮助开发者创建灵活、简洁和漂亮的 Toast 提示框。本文将详细介绍如何在 Flutter 项目中使用 ftoast。

特性

• 提供便捷的方式创建 Toast
• 支持主信息、次信息，并可自定义它们的样式
• 支持灵活的图标视图
• 支持配置圆角大小和背景颜色
• 支持队列显示
• 支持自定义 Toast 样式

使用指南

添加依赖

首先，在项目的 pubspec.yaml 文件中添加 ftoast 依赖：

dependencies:
  ftoast: ^2.0.0

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

基本使用

以下是一个简单的示例，展示如何使用 ftoast 显示基本的 Toast 提示：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FToast Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              FToast.toast(context, msg: "This is a simple Toast");
            },
            child: Text('Show Toast'),
          ),
        ),
      ),
    );
  }
}

参数说明

示例代码

基本示例

FToast.toast(
  context,
  duration: 800,
  msg: "I'm FToast",
  msgStyle: TextStyle(color: Colors.white),
);

带副标题的示例

FToast.toast(
  context,
  msg: "This is Msg",
  subMsg: "Welcome to use FToast. This is subMsg!",
  subMsgStyle: TextStyle(color: Colors.white, fontSize: 13),
);

带图标的示例

FToast.toast(
  context,
  msg: "This is Msg",
  subMsg: "Welcome to use FToast. This is subMsg!",
  image: Icon(Icons.star, color: Colors.yellow),
  imageDirection: AxisDirection.up,
);

自定义样式的示例

FToast.toast(
  context,
  toast: FSuper(
    text: "Custom Toast",
    style: TextStyle(color: Colors.grey),
    padding: EdgeInsets.all(12),
    shadowColor: Colors.yellow,
    shadowBlur: 80,
  ),
);

完整示例 Demo

以下是一个完整的示例项目，展示了如何使用 ftoast 的各种功能：

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('FToast Example'),
            centerTitle: true,
          ),
          body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                buildTitle("FToast"),
                buildMiddleMargin(),
                buildFToast(context),
                const SizedBox(height: 500),

                buildTitle("SubMsg"),
                buildMiddleMargin(),
                buildSubMsg(context),
                const SizedBox(height: 500),

                buildTitle("Image"),
                buildMiddleMargin(),
                buildImage(context),
                const SizedBox(height: 500),

                buildTitle("Custom Toast"),
                buildMiddleMargin(),
                buildCustomToast(context),
                const SizedBox(height: 500),
              ],
            ),
          ),
        );
      }),
    );
  }

  Widget buildTitle(String title) {
    return Text(
      title,
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    );
  }

  Widget buildMiddleMargin() {
    return SizedBox(height: 20);
  }

  Widget buildFToast(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        FToast.toast(
          context,
          duration: 800,
          msg: "I'm FToast: ${count++}",
          msgStyle: TextStyle(color: Colors.white),
        );
      },
      child: Text('Show Basic Toast'),
    );
  }

  Widget buildSubMsg(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        FToast.toast(
          context,
          msg: "This is Msg",
          subMsg: "Welcome to use FToast. This is subMsg!",
          subMsgStyle: TextStyle(color: Colors.white, fontSize: 13),
        );
      },
      child: Text('Show Toast with SubMsg'),
    );
  }

  AxisDirection up = AxisDirection.up;

  Widget buildImage(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        switch (up) {
          case AxisDirection.up:
            up = AxisDirection.left;
            break;
          case AxisDirection.left:
            up = AxisDirection.right;
            break;
          case AxisDirection.right:
            up = AxisDirection.down;
            break;
          case AxisDirection.down:
            up = AxisDirection.up;
            break;
        }
        FToast.toast(
          context,
          msg: "This is Msg",
          subMsg: "Welcome to use FToast. This is subMsg!",
          image: Icon(Icons.star, color: Colors.yellow),
          imageDirection: up,
        );
      },
      child: Text('Show Toast with Image'),
    );
  }

  Widget buildCustomToast(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        FToast.toast(
          context,
          toast: FSuper(
            text: "Custom Toast",
            style: TextStyle(color: Colors.grey),
            padding: EdgeInsets.all(12),
            shadowColor: Colors.yellow,
            shadowBlur: 80,
          ),
        );
      },
      child: Text('Show Custom Toast'),
    );
  }
}