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

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

tasty_toast 是一个简单的包，可以在屏幕上显示一个提示框。默认情况下，提示框位于底部中央，但你可以通过 Alignment 参数将其放置在任何位置。

你还可以通过提供 TextStyle 来自定义提示框的文字样式，或者通过 BoxDecoration 来自定义背景样式。

注意：你必须提供一个 context。

（即使切换屏幕，提示框也会保持可见。）

开始使用

导入 tasty_toast
import 'package:tasty_toast/tasty_toast.dart';
调用 showToast 方法
showToast(
  context,
  "一些消息！",
);

这将使用默认设置，即深色背景，白色文字，并显示在底部中央。

可选地自定义提示框
showToast(
  context,
  "完全自定义",

  // 可选参数：
  alignment: Alignment.centerLeft,
  textStyle: customTextStyle,
  background: customBoxDecoration,
  duration: Duration(seconds: 5),
  padding: EdgeInsets.all(25.0),
  offsetAnimationStart: Offset(-0.1, -0.1),  // 定义飞入动画的起始位置
);

查看演示

Android屏幕录制，包含默认和自定义提示框

点击按钮以展示连续提示框的行为。

iOS默认

完整示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tasty Toasts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tasty Toasts Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
              onPressed: () => showToast(
                context,
                "默认提示框",
              ),
              child: Text("显示默认提示框！"),
            ),
            ElevatedButton(
              onPressed: () {
                var customTextStyle = TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 18,
                  color: Colors.grey[800],
                );

                var customBackground = BoxDecoration(
                  border: Border.all(
                    color: Colors.grey[400],
                    width: 1.0,
                  ),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Colors.grey[100],
                      Colors.grey[300],
                    ],
                  ),
                  borderRadius: BorderRadius.circular(50.0),
                );

                showToast(
                  context,
                  "完全自定义",

                  // 可选参数：
                  alignment: Alignment.centerLeft,
                  textStyle: customTextStyle,
                  background: customBackground,
                  duration: Duration(seconds: 5),
                  padding: EdgeInsets.all(16.0),
                  offsetAnimationStart: Offset(-0.1, -0.1),
                );
              },
              child: Text("显示自定义提示框！"),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用tasty_toast插件来显示轻量级提示框的示例代码。tasty_toast是一个轻量级且易于使用的Flutter提示框插件，支持多种自定义选项。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  tasty_toast: ^1.2.0  # 确保使用最新版本，可以访问pub.dev查看最新版本号

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

2. 初始化TastyToast

在你的主应用文件（通常是main.dart）中初始化TastyToast：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

3. 使用TastyToast显示提示框

在你的具体页面或组件中，你可以使用TastyToast来显示提示框。例如，在HomeScreen中：

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TastyToast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                TastyToast.showToast(
                  context: context,
                  msg: "Hello, TastyToast!",
                  toastGravity: ToastGravity.CENTER,
                  backgroundColor: Colors.blue,
                  textColor: Colors.white,
                  fontSize: 18.0,
                );
              },
              child: Text('Show Simple Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                TastyToast.showToast(
                  context: context,
                  msg: "This is a long toast message that will wrap to multiple lines if necessary.",
                  toastGravity: ToastGravity.BOTTOM,
                  animationType: ToastAnimation.FADE,
                  isLoading: false,
                  duration: Duration(seconds: 3),  // 显示3秒
                  image: NetworkImage('https://via.placeholder.com/50'),
                  backgroundColor: Colors.green,
                  textColor: Colors.white,
                  fontSize: 16.0,
                  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                );
              },
              child: Text('Show Long Toast with Image'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的Flutter应用，点击按钮即可看到不同类型的提示框。

总结

tasty_toast插件提供了一个简单而强大的方式来在Flutter应用中显示轻量级提示框。通过自定义各种参数，你可以很容易地实现符合你应用风格的提示框。上述代码展示了如何初始化插件以及如何在按钮点击事件中显示不同类型的提示框。

回到顶部