「mini_toast」で軽量・シンプルな通知を実装しよう

アプリ開発において、ユーザーに対して短い通知やフィードバックを表示する機能は欠かせません。操作の成功や失敗、警告など、さまざまな情報をタイミングよく伝えることで、ユーザー体験は大きく向上します。しかし、Flutterの標準機能であるSnackBarやDialogは、シンプルな通知には少し大げさだったり、カスタマイズが面倒だったりすることがあります。

そんな悩みを解決してくれるのが、今回紹介する「mini_toast」パッケージです。名前の通り、ミニマルでありながら高い機能性を備えたトースト通知を実現してくれます。

mini_toastとは？

mini_toastは、Flutterアプリに軽量でカスタマイズ可能なトースト通知を簡単に実装できるパッケージです。

主な特徴：

  • 非常に軽量なコードベース
  • シンプルなAPI設計
  • 豊富なカスタマイズオプション
  • アニメーション効果
  • 複数の表示位置をサポート
  • テキストだけでなくアイコンや独自ウィジェットも表示可能

標準のSnackBarよりも柔軟で、他の大型トーストライブラリよりも軽量という絶妙なバランスが特徴です。

インストール方法

まずは pubspec.yaml に依存関係を追加します。

dependencies:
  mini_toast: ^0.5.1  # 最新版は pub.dev を確認

その後、依存関係を取得します：

flutter pub get

基本的な使い方

1. シンプルなトースト表示

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

class SimpleToastDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Mini Toast デモ')),
      body: Center(
        child: ElevatedButton(
          child: Text('トーストを表示'),
          onPressed: () {
            // 最もシンプルな使い方
            MiniToast.showToast(
              context: context,
              message: 'これはシンプルなトーストです',
            );
          },
        ),
      ),
    );
  }
}

これだけで、画面下部に短いトースト通知が表示されます。

2. 表示位置の変更

トーストの表示位置は簡単に変更できます：

MiniToast.showToast(
  context: context,
  message: '上部に表示するトースト',
  position: ToastPosition.top,
);

MiniToast.showToast(
  context: context,
  message: '中央に表示するトースト',
  position: ToastPosition.center,
);

MiniToast.showToast(
  context: context,
  message: '下部に表示するトースト',
  position: ToastPosition.bottom, // デフォルト
);

3. デュレーションの設定

トーストの表示時間もカスタマイズ可能です：

// 短い表示時間（1秒）
MiniToast.showToast(
  context: context,
  message: '短い通知',
  duration: Duration(seconds: 1),
);

// 長い表示時間（5秒）
MiniToast.showToast(
  context: context,
  message: '重要な通知なので長く表示',
  duration: Duration(seconds: 5),
);

4. スタイルのカスタマイズ

トーストの見た目も自由にカスタマイズできます：

MiniToast.showToast(
  context: context,
  message: 'カスタムスタイルのトースト',
  backgroundColor: Colors.purple,
  textColor: Colors.white,
  fontSize: 16.0,
  borderRadius: 8.0,
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
);

5. アイコン付きトースト

アイコンを追加することで、より直感的な通知が可能です：

// 成功通知
MiniToast.showToast(
  context: context,
  message: '操作が成功しました',
  icon: Icon(Icons.check_circle, color: Colors.green),
);

// エラー通知
MiniToast.showToast(
  context: context,
  message: 'エラーが発生しました',
  icon: Icon(Icons.error, color: Colors.red),
);

// 警告通知
MiniToast.showToast(
  context: context,
  message: '注意が必要です',
  icon: Icon(Icons.warning, color: Colors.orange),
);

高度な使い方

カスタムウィジェットトースト

テキストだけでなく、完全にカスタマイズされたウィジェットを表示することも可能です：

MiniToast.showCustomToast(
  context: context,
  widget: Container(
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.blueGrey,
      borderRadius: BorderRadius.circular(12),
      boxShadow: [
        BoxShadow(
          color: Colors.black26,
          blurRadius: 8,
          offset: Offset(0, 3),
        ),
      ],
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.shopping_cart, color: Colors.white),
        SizedBox(width: 12),
        Text(
          'カートに追加しました',
          style: TextStyle(color: Colors.white),
        ),
      ],
    ),
  ),
  position: ToastPosition.bottom,
  duration: Duration(seconds: 2),
);

アクションボタン付きトースト

カスタムウィジェットを活用して、アクションボタンを持つトーストを作成することもできます：

MiniToast.showCustomToast(
  context: context,
  widget: Container(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
    decoration: BoxDecoration(
      color: Colors.green.shade700,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.file_download_done, color: Colors.white),
        SizedBox(width: 12),
        Text(
          'ダウンロード完了',
          style: TextStyle(color: Colors.white),
        ),
        SizedBox(width: 12),
        TextButton(
          child: Text(
            '開く',
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          onPressed: () {
            // ファイルを開く処理
            MiniToast.dismissAllToasts(); // 全てのトーストを閉じる
          },
        ),
      ],
    ),
  ),
  duration: Duration(seconds: 5),
);

アニメーションのカスタマイズ

トーストの表示/非表示アニメーションもカスタマイズ可能です：

MiniToast.showToast(
  context: context,
  message: 'カスタムアニメーション',
  enterAnimation: ToastAnimation.slideFromLeft,
  exitAnimation: ToastAnimation.fade,
  animationDuration: Duration(milliseconds: 300),
);

利用可能なアニメーション：

  • ToastAnimation.fade – フェードイン/アウト
  • ToastAnimation.scale – 拡大/縮小
  • ToastAnimation.slideFromTop – 上からスライドイン
  • ToastAnimation.slideFromBottom – 下からスライドイン
  • ToastAnimation.slideFromLeft – 左からスライドイン
  • ToastAnimation.slideFromRight – 右からスライドイン

実装例：通知タイプ別のヘルパー関数

実際のアプリでは、通知タイプごとに統一したデザインを使用することが一般的です。以下のヘルパー関数を作成して、アプリ全体で一貫したトースト通知を表示しましょう：

class AppToast {
  static void showSuccess(BuildContext context, String message) {
    MiniToast.showToast(
      context: context,
      message: message,
      backgroundColor: Colors.green.shade700,
      textColor: Colors.white,
      icon: Icon(Icons.check_circle, color: Colors.white),
      duration: Duration(seconds: 2),
      borderRadius: 8.0,
    );
  }

  static void showError(BuildContext context, String message) {
    MiniToast.showToast(
      context: context,
      message: message,
      backgroundColor: Colors.red.shade700,
      textColor: Colors.white,
      icon: Icon(Icons.error, color: Colors.white),
      duration: Duration(seconds: 3),
      borderRadius: 8.0,
    );
  }

  static void showWarning(BuildContext context, String message) {
    MiniToast.showToast(
      context: context,
      message: message,
      backgroundColor: Colors.orange.shade700,
      textColor: Colors.white,
      icon: Icon(Icons.warning, color: Colors.white),
      duration: Duration(seconds: 3),
      borderRadius: 8.0,
    );
  }

  static void showInfo(BuildContext context, String message) {
    MiniToast.showToast(
      context: context,
      message: message,
      backgroundColor: Colors.blue.shade700,
      textColor: Colors.white,
      icon: Icon(Icons.info, color: Colors.white),
      duration: Duration(seconds: 2),
      borderRadius: 8.0,
    );
  }

  static void showLoading(BuildContext context, {String message = 'Loading...'}) {
    MiniToast.showCustomToast(
      context: context,
      widget: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          color: Colors.black87,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
            ),
            SizedBox(width: 12),
            Text(
              message,
              style: TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
      duration: Duration(seconds: 30), // 長めの表示時間
      position: ToastPosition.center,
    );
  }

  static void dismissAllToasts() {
    MiniToast.dismissAllToasts();
  }
}

使用例：

// 成功通知
AppToast.showSuccess(context, 'プロフィールを更新しました');

// エラー通知
AppToast.showError(context, 'ネットワーク接続エラーが発生しました');

// 警告通知
AppToast.showWarning(context, 'バッテリー残量が少なくなっています');

// 情報通知
AppToast.showInfo(context, '新しいメッセージが届いています');

// ローディング通知
AppToast.showLoading(context, message: 'データを読み込み中...');

// 処理完了後にすべてのトーストを消去
AppToast.dismissAllToasts();

パフォーマンスの最適化

mini_toastは非常に軽量に設計されていますが、さらにパフォーマンスを向上させるためのヒント：

  1. 過度なトースト表示を避ける: 短時間に多数のトーストを表示するのは避けましょう
  2. カスタムウィジェットの複雑さに注意: 複雑すぎるウィジェットはパフォーマンスに影響します
  3. 適切なトースト表示時間: 情報量に合わせて適切な表示時間を設定しましょう
  4. 不要なトーストの削除: 処理完了後はdismissAllToasts()を呼び出しましょう

さまざまな活用シーン

mini_toastはさまざまなシーンで活用できます：

フォーム操作のフィードバック

  • 保存成功/失敗の通知
  • 入力バリデーションエラーの表示
  • アップロード進捗の表示

ユーザーアクションの確認

  • 「いいね」や「シェア」の完了通知
  • 設定変更の確認
  • アイテム追加/削除の確認

システム通知

  • バックグラウンド処理の完了通知
  • 同期状態の通知
  • ネットワーク接続状態の変化

教育的通知

  • 新機能の紹介
  • ヒントやコツの表示
  • チュートリアルステップのガイダンス

まとめ

mini_toastは、Flutterアプリに軽量でシンプルなトースト通知を簡単に実装できるパッケージです。

このパッケージが特に役立つケース：

  • ユーザーに対してさりげない通知を表示したい
  • 標準のSnackBarより柔軟なカスタマイズが必要
  • 重いダイアログボックスを使わずに短いメッセージを伝えたい
  • アプリ全体で統一された通知デザインを実現したい

シンプルなAPIと豊富なカスタマイズオプションで、ユーザー体験を向上させつつ、開発の手間を大幅に削減できます。Flutterアプリにスタイリッシュなトースト通知を追加したいなら、ぜひmini_toastを試してみてください。

タイトルとURLをコピーしました