搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案