Flutter消息提示插件MangoToast的使用

MangoToast 是一个自定义的 Flutter 小部件，用于在屏幕上显示消息提示。它支持不同类型的提示信息，如成功、错误和警告。每种类型的消息都以不同的颜色显示。

使用方法

要显示一条警告消息，可以使用 MangoToast.warning 方法。该方法接受一个字符串消息和一个可选的位置参数。位置参数决定了提示信息在屏幕上的对齐方式，它可以是 toastPosition.left、toastPosition.right 或 toastPosition.center。

以下是一个如何使用它的示例：

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:mango_toast/mango_toast.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("MangoToast 示例")),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示警告消息提示
              MangoToast.warning('警告消息', position: toastPosition.left).show(context);
            },
            child: Text("点击显示警告消息"),
          ),
        ),
      ),
    );
  }
}

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("MangoToast 示例")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  // 显示警告消息提示
                  MangoToast.warning('警告消息', position: toastPosition.left).show(context);
                },
                child: Text("点击显示警告消息"),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 显示成功消息提示
                  MangoToast.success('操作成功', position: toastPosition.center).show(context);
                },
                child: Text("点击显示成功消息"),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 显示错误消息提示
                  MangoToast.error('发生错误', position: toastPosition.right).show(context);
                },
                child: Text("点击显示错误消息"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

gougou168 1楼

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

mango_toast 是一个用于在 Flutter 应用中显示消息提示（Toast）的插件。它允许你以简单的方式在屏幕上显示短暂的提示信息，通常用于通知用户某些操作的结果。

安装 `mango_toast`

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

dependencies:
  flutter:
    sdk: flutter
  mango_toast: ^latest_version

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

使用 `mango_toast`

以下是如何使用 mango_toast 的基本示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mango Toast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                MangoToast.showToast(
                  context,
                  message: 'This is a simple toast message',
                  duration: MangoToast.lengthShort,
                  gravity: MangoToast.bottom,
                );
              },
              child: Text('Show Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                MangoToast.showToast(
                  context,
                  message: 'This is a long toast message',
                  duration: MangoToast.lengthLong,
                  gravity: MangoToast.center,
                );
              },
              child: Text('Show Long Toast'),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

context: 当前上下文，通常是 BuildContext。
message: 要显示的消息内容。
duration: 提示消息显示的时长。MangoToast.lengthShort 表示短时间显示，MangoToast.lengthLong 表示长时间显示。
gravity: 提示消息显示的位置。MangoToast.bottom 表示在底部显示，MangoToast.center 表示在中间显示，MangoToast.top 表示在顶部显示。

自定义样式

mango_toast 还允许你自定义提示消息的样式，例如背景颜色、文字颜色、圆角等。

MangoToast.showToast(
  context,
  message: 'Custom Style Toast',
  duration: MangoToast.lengthShort,
  gravity: MangoToast.bottom,
  backgroundColor: Colors.green,
  textColor: Colors.white,
  borderRadius: 10.0,
);

Flutter消息提示插件mango_toast的使用