Flutter消息提示插件toasta的使用

Flutter消息提示插件Toasta的使用

简单、流畅且优雅的Flutter跨平台Toast库。灵感来自iOS。 iOS Android

Web Demo

如何使用

步骤1: 添加到pubspec.yaml

flutter pub add toasta

步骤2: 将你的MaterialApp包裹在ToastaContainer中

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ToastaContainer( // 包裹你的应用
      child: MaterialApp(
        ...
      ),
    );
  }
}

步骤3: 开始使用

final toast = Toast(title: "Hello World", subtitle: "This is Toasta");
Toasta(context).toast(toast);

属性说明

属性 描述 默认值
height Toast的高度 56
width Toast的宽度 屏幕宽度的70%
darkMode 暗模式 false
fadeInSubtitle 子标题淡入动画 false
title Toast的上部，可以传递字符串或小部件自定义 null
subtitle Toast的下部，可以传递字符串或小部件自定义 null
leading 自定义Toast的开头部分 null
trailing 自定义Toast的结尾部分 null
onTap 点击Toast的回调函数 null
onAppear 出现后的回调函数 null
onExit 消失后的回调函数 null
status 可以传递ToastStatus，如成功、失败、警告、信息等 null
backgroundColor 自定义背景颜色 null
duration Toast的持续时间 Duration(seconds: 3)
borderRadius Toast的圆角半径 BorderRadius.all(Radius.circular(25.0))

支持

欢迎提出功能建议、报告问题或自定义属性。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ToastaContainer(
      child: MaterialApp(
        title: "Toasta Demo",
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var darkMode = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: darkMode ? Colors.black : Colors.white,
      body: SingleChildScrollView(
        child: Center(
          child: Container(
            width: double.infinity,
            constraints: const BoxConstraints(maxWidth: 500),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  const SizedBox(height: 32),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            elevation: 2,
                            primary: darkMode ? Colors.white : Colors.black),
                        child: Text('Title & Subtitle',
                            style: TextStyle(
                                color: darkMode ? Colors.black : Colors.white)),
                        onPressed: () {
                          toastTitleSubtitle(context);
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 8, horizontal: 32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            elevation: 2,
                            primary: darkMode ? Colors.white : Colors.black),
                        child: Text('Without Fade In Subtitle',
                            style: TextStyle(
                                color: darkMode ? Colors.black : Colors.white)),
                        onPressed: () {
                          toastNoFadeIn(context);
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 8, horizontal: 32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            elevation: 2,
                            primary: darkMode ? Colors.white : Colors.black),
                        child: Text('Custom Duration',
                            style: TextStyle(
                                color: darkMode ? Colors.black : Colors.white)),
                        onPressed: () {
                          toastCustomDuration(context);
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 8, horizontal: 32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            elevation: 2, primary: Colors.green),
                        child: Text('Success',
                            style: TextStyle(color: Colors.white)),
                        onPressed: () {
                          toastSuccess(context);
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 8, horizontal: 32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            elevation: 2, primary: Colors.red),
                        child: Text('Failed',
                            style: TextStyle(color: Colors.white)),
                        onPressed: () {
                          toastFailed(context);
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 8, horizontal: 32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            elevation: 2, primary: Colors.yellow),
                        child: Text('Warning',
                            style: TextStyle(color: Colors.black)),
                        onPressed: () {
                          toastWarning(context);
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 8, horizontal: 32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            elevation: 2, primary: Colors.blue),
                        child:
                            Text('Info', style: TextStyle(color: Colors.white)),
                        onPressed: () {
                          toastInfo(context);
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(32.0),
                    child: Container(
                      width: double.infinity,
                      height: 48,
                      child: OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          side: BorderSide(
                              width: 1,
                              color: darkMode ? Colors.white : Colors.black),
                        ),
                        child: Text(darkMode ? 'Light Mode' : 'Dark Mode',
                            style: TextStyle(
                                color: darkMode ? Colors.white : Colors.black)),
                        onPressed: () {
                          setState(() {
                            darkMode = !darkMode;
                          });
                        },
                      ),
                    ),
                  ),
                  SelectableText('Built by @megatunger',
                      style: Theme.of(context).textTheme.caption)
                ]),
          ),
        ),
      ), // 这个逗号使自动格式化更美观
    );
  }

  void toastTitleSubtitle(BuildContext context) {
    final toast = Toast(
        title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        subtitle:
            "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
        darkMode: darkMode);
    Toasta(context).toast(toast);
  }

  void toastNoFadeIn(BuildContext context) {
    final toast = Toast(
        title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        subtitle:
            "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
        darkMode: darkMode,
        fadeInSubtitle: false);
    Toasta(context).toast(toast);
  }

  void toastSuccess(BuildContext context) {
    final toast = Toast(
        title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        subtitle:
            "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris",
        status: ToastStatus.success,
        darkMode: darkMode);
    Toasta(context).toast(toast);
  }

  void toastFailed(BuildContext context) {
    final toast = Toast(
        title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        subtitle:
            "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris",
        status: ToastStatus.failed,
        darkMode: darkMode);
    Toasta(context).toast(toast);
  }

  void toastWarning(BuildContext context) {
    final toast = Toast(
        title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        subtitle:
            "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris",
        status: ToastStatus.warning,
        darkMode: darkMode);
    Toasta(context).toast(toast);
  }

  void toastInfo(BuildContext context) {
    final toast = Toast(
        title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        subtitle:
            "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris",
        status: ToastStatus.info,
        darkMode: darkMode);
    Toasta(context).toast(toast);
  }

  void toastCustomDuration(BuildContext context) {
    final toast = Toast(
        title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        duration: const Duration(seconds: 5),
        darkMode: darkMode);
    Toasta(context).toast(toast);
  }
}

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

1 回复

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


toasta 是一个用于 Flutter 的消息提示插件，它可以帮助你在应用中显示各种类型的提示消息，如成功、错误、警告等。使用 toasta 可以让你轻松地在应用中添加美观且功能丰富的消息提示。

安装 toasta

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

dependencies:
  flutter:
    sdk: flutter
  toasta: ^1.2.0  # 请检查最新版本

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

基本用法

在你的 Dart 文件中导入 toasta：

import 'package:toasta/toasta.dart';

显示简单的消息提示

你可以使用 Toasta 类来显示不同类型的消息提示。以下是一个简单的例子：

Toasta.show(
  context,
  message: '这是一个成功的提示',
  type: ToastaType.success,
  duration: ToastaDuration.short,
);

显示不同类型的消息提示

toasta 支持多种类型的消息提示，如 success、error、warning、info 等。你可以通过 type 参数来指定提示类型：

Toasta.show(
  context,
  message: '这是一个错误的提示',
  type: ToastaType.error,
  duration: ToastaDuration.long,
);

Toasta.show(
  context,
  message: '这是一个警告的提示',
  type: ToastaType.warning,
  duration: ToastaDuration.short,
);

Toasta.show(
  context,
  message: '这是一个信息的提示',
  type: ToastaType.info,
  duration: ToastaDuration.short,
);

自定义持续时间

你可以通过 duration 参数来指定消息提示的显示时间。ToastaDuration 提供了 short 和 long 两种预设时间，你也可以自定义时间：

Toasta.show(
  context,
  message: '自定义持续时间的提示',
  type: ToastaType.success,
  duration: Duration(seconds: 5),
);

自定义样式

你可以通过 style 参数来自定义消息提示的样式。ToastaStyle 允许你设置背景颜色、文字颜色、边框等：

Toasta.show(
  context,
  message: '自定义样式的提示',
  type: ToastaType.success,
  style: ToastaStyle(
    backgroundColor: Colors.blue,
    textColor: Colors.white,
    borderRadius: BorderRadius.circular(10),
  ),
);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 toasta：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ToastExample(),
    );
  }
}

class ToastExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toasta 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Toasta.show(
                  context,
                  message: '这是一个成功的提示',
                  type: ToastaType.success,
                  duration: ToastaDuration.short,
                );
              },
              child: Text('显示成功提示'),
            ),
            ElevatedButton(
              onPressed: () {
                Toasta.show(
                  context,
                  message: '这是一个错误的提示',
                  type: ToastaType.error,
                  duration: ToastaDuration.long,
                );
              },
              child: Text('显示错误提示'),
            ),
            ElevatedButton(
              onPressed: () {
                Toasta.show(
                  context,
                  message: '这是一个警告的提示',
                  type: ToastaType.warning,
                  duration: ToastaDuration.short,
                );
              },
              child: Text('显示警告提示'),
            ),
            ElevatedButton(
              onPressed: () {
                Toasta.show(
                  context,
                  message: '这是一个信息的提示',
                  type: ToastaType.info,
                  duration: ToastaDuration.short,
                );
              },
              child: Text('显示信息提示'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部