Flutter消息提示插件basic_toast的使用

Flutter消息提示插件basic_toast的使用

Installation（安装）

  1. 如果juneflow项目不存在，请根据此指南创建它。
  2. 在juneflow项目的根目录下打开终端，并输入以下命令：
    june add basic_toast
  3. 启动项目，输入以下命令：
    flutter run lib/app/_/_/interaction/view.blueprint.popup/toast/basic_toast/usage.dart -d chrome

Screenshots（截图）

使用示例

下面是一个完整的示例，演示如何在Flutter应用中使用basic_toast插件。

1. 添加依赖

首先，在pubspec.yaml文件中添加basic_toast依赖：

dependencies:
  basic_toast: ^1.0.0

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

2. 导入库

在需要使用basic_toast的文件中导入以下库：

import 'package:basic_toast/basic_toast.dart';

3. 显示Toast

在你的Flutter代码中，可以使用showBasicToast方法来显示Toast。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:basic_toast/basic_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('basic_toast示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示Toast
              showBasicToast(context, "这是一条基本的消息提示");
            },
            child: Text('显示Toast'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


basic_toast 是一个简单的 Flutter 插件，用于在应用中显示短时间的消息提示（Toast）。它非常适合用于需要向用户展示一些短暂信息的场景，比如操作成功、失败提示等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  basic_toast: ^1.0.0  # 请使用最新的版本号

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

使用

在需要使用 basic_toast 的地方导入该包：

import 'package:basic_toast/basic_toast.dart';

接下来，你可以使用 BasicToast.showToast 方法来显示 Toast 消息。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:basic_toast/basic_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('BasicToast Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              BasicToast.showToast(
                context,
                message: 'Hello, this is a toast message!',
                duration: Duration(seconds: 2),
              );
            },
            child: Text('Show Toast'),
          ),
        ),
      ),
    );
  }
}

参数说明

  • context: 当前的 BuildContext。
  • message: 要显示的消息内容。
  • duration: Toast 显示的时长，默认为 Duration(seconds: 2)。
  • backgroundColor: Toast 的背景颜色，默认为 Colors.black.
  • textColor: 消息文本的颜色，默认为 Colors.white.
  • position: Toast 显示的位置，默认为 ToastPosition.bottom。你可以选择 ToastPosition.top 或 ToastPosition.center。

示例代码

以下是一个更完整的示例，展示了如何使用不同的参数来定制 Toast 的外观和位置：

import 'package:flutter/material.dart';
import 'package:basic_toast/basic_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('BasicToast Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  BasicToast.showToast(
                    context,
                    message: 'Bottom Toast',
                    duration: Duration(seconds: 2),
                    backgroundColor: Colors.blue,
                    textColor: Colors.white,
                    position: ToastPosition.bottom,
                  );
                },
                child: Text('Show Bottom Toast'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  BasicToast.showToast(
                    context,
                    message: 'Top Toast',
                    duration: Duration(seconds: 2),
                    backgroundColor: Colors.green,
                    textColor: Colors.white,
                    position: ToastPosition.top,
                  );
                },
                child: Text('Show Top Toast'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  BasicToast.showToast(
                    context,
                    message: 'Center Toast',
                    duration: Duration(seconds: 2),
                    backgroundColor: Colors.red,
                    textColor: Colors.white,
                    position: ToastPosition.center,
                  );
                },
                child: Text('Show Center Toast'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部