搜索插件、代码仓与 APP 分类

oktoast 封面
插件详情v3.4.0

oktoast

一个纯 Flutter 的 Toast 库,支持自定义样式/组件,轻松实现与原生 Toast 相同的效果。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
4.5万
喜欢数
361
Pub 分数
160

安装插件

flutter pub add oktoast

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

oktoast 是一个轻量级的纯 Flutter toast 库,旨在跨所有平台提供原生般的 toast 通知。它支持自定义样式和组件,使开发者能够创建视觉上一致且高度可定制的 toast 消息。通过单条命令即可轻松集成,快速实现流畅、不干扰的反馈效果。该库持续维护,并兼容 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

  • 显示用户简要反馈
  • 显示成功或错误消息
  • 自定义吐司外观
  • 提供临时状态更新
  • 增强用户界面的响应能力
  • 替换默认的 Flutter snackbar

主要特点

  • 支持自定义控件和样式
  • 跨平台兼容性
  • 快速设置的简单 API
  • 非阻塞式吐司显示
  • 可配置的持续时间和位置
  • 轻量且高性能

适合对象

  • 移动应用反馈
  • Web 应用通知
  • 桌面应用程序用户提示
  • 需要一致的气泡提示设计的应用程序
  • 希望依赖项最少的开发者
  • 需要跨平台提示的项目

使用建议

  • 可能需要额外的样式设置以适应复杂布局
  • 有限的内置动画
  • 不适合用于持久性通知
  • 需要手动管理多个Toast
  • 仅适用于临时消息
  • 无内置本地化支持

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

oktoast

oktoast pub package GitHub GitHub stars

A library for flutter.

A pure dart toast Library.

You can completely customize the style of toast.

中文博客介绍

Screenshot

Default Custom GIF
pic pic pic

Versions

3.x.x

Starting from the 3.x version, OKToast provides a null-safety version, the specific introduction of null-safety can be viewed in dart or flutter.

The 2.3.2 version is the last version that does not support null-safety.

About version 1.x

if you use OKToast 1.x, Please use the 1.x branch, and read version readme.

Proposed migration to 2.x version. The new version does not require buildContext.

And you can completely customize the style of toast, because now you can use showToastWidget.

Usage

1. Add library to your pubspec.yaml
flutter pub add oktoast
2. Import library in dart file
import 'package:oktoast/oktoast.dart';
3. Wrap your app widget
OKToast(
  /// set toast style, optional
  child:MaterialApp()
);

Tips: If you happened error like: No MediaQuery widget found, you can try to use this code to include OKToast to your App.

MaterialApp(
  builder: (BuildContext context, Widget? widget) {
    return OKToast(child: widget);
  },
);
4. Call method showToast
showToast('content');

// position and second have default value, is optional
showToastWidget(Text('hello oktoast'));

Explain

There are two reasons why you need to wrap MaterialApp

  1. Because this ensures that toast can be displayed in front of all other controls
  2. Context can be cached so that it can be invoked anywhere without passing in context

Properties

OKToast params

OKToast have default style, and you also can custom style or other behavior.

name type need desc
child Widget required Usually Material App
textStyle TextStyle optional
radius double optional
backgroundColor Color optional backroundColor
position ToastPosition optional
dismissOtherOnShow bool optional If true, other toasts will be dismissed. Default false.
movingOnWindowChange bool optional If true, when the size changes, toast is moved. Default true.
textDirection TextDirection optional
textPadding EdgeInsetsGeometry optional Outer margin of text
textAlign TextAlign optional When the text wraps, the align of the text.
handleTouch bool optional Default is false, if it's true, can responed use touch event.
animationBuilder OKToastAnimationBuilder optional Add animation to show / hide toast.
animationDuration Duration optional The duration of animation.
animationCurve Curve optional Curve of animation.
duration Duration optional Default duration of toast.
Method showToast

Display text on toast.

Description of params see OKToast.

name type need desc
msg String required Text of toast.
context BuildContext optional
duration Duration optional
position ToastPosition optional
textStyle TextStyle optional
textPadding EdgeInsetsGeometry optional
backgroundColor Color optional
radius double optional
onDismiss Function optional
textDirection TextDirection optional
dismissOtherToast bool optional
textAlign TextAlign optional
animationBuilder OKToastAnimationBuilder optional
animationDuration Duration optional
animationCurve Curve optional
Method showToastWidget

Display custom widgets on toast

Description of params see showToast.

name type need desc
widget Widget required The widget you want to display.
context BuildContext optional
duration Duration optional
position ToastPosition optional
onDismiss Function optional
dismissOtherToast bool optional
textDirection TextDirection optional
handleTouch bool optional
animationBuilder OKToastAnimationBuilder optional
animationDuration Duration optional
animationCurve Curve optional
Method dismissAllToast

Dismiss all toast.

Return value of showToast and showToastWidget

about return type:
showToast and showToastWidget return type is ToastFuture, The ToastFuture can be use to dismiss the toast.

For all dismiss toast method

An optional parameter showAnim is added to control whether fading animation is required for dismiss.

The praram default value is false.

Examples

import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart'; // 1. import library

void main() => runApp( MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OKToast(
      // 2. wrap your app with OKToast
      child:  MaterialApp(
        title: 'Flutter Demo',
        theme:  ThemeData(
          primarySwatch: Colors.blue,
        ),
        home:  MyHomePage(),
      ),
    );
  }
}

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

  @override
  _MyHomePageState createState() =>  _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    _counter++;

    // 3.1 use showToast method
    showToast(
      "$_counter",
      duration: Duration(seconds: 2),
      position: ToastPosition.bottom,
      backgroundColor: Colors.black.withOpacity(0.8),
      radius: 13.0,
      textStyle: TextStyle(fontSize: 18.0),
    );

    showToast(
      "$_counter",
      duration: Duration(seconds: 2),
      position: ToastPosition.top,
      backgroundColor: Colors.black.withOpacity(0.8),
      radius: 3.0,
      textStyle: TextStyle(fontSize: 30.0),
    );

    // 3.2 use showToastWidget method to custom widget
    Widget widget = Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(30.0),
        child: Container(
          width: 40.0,
          height: 40.0,
           color: Colors.grey.withOpacity(0.3),
          child: Icon(
            Icons.add,
            size: 30.0,
            color: Colors.green,
          ),
        ),
      ),
    );

    ToastFuture toastFuture = showToastWidget(
      widget,
      duration: Duration(seconds: 3),
      onDismiss: () {
        print("the toast dismiss"); // the method will be called on toast dismiss.
      },
    );

    // can use future
    Future.delayed(Duration(seconds: 1), () {
      toastFuture.dismiss(); // dismiss
    });

    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title:  Text("ktoast demo"),
      ),
      body: Stack(
        children: <Widget>[
           Center(
            child: ListView(
              children: <Widget>[
                 Text(
                  'You have pushed the button this many times:',
                ),
                 Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: RaisedButton(
                    onPressed: () {
                      Navigator.push(context,
                          MaterialPageRoute(builder: (ctx) => MyHomePage()));
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: RaisedButton(
                    onPressed: _incrementCounter,
                    child: Text('toast'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}


CHANGELOG

Link

LICENSE

Apache-2.0

所属分类

源码仓库

使用此插件的项目