【Flutter】トーストを表示する【fluttertoast】

Flutterのパッケージfluttertoastを使ってトースト（ポップアップの一種）を表示したい！

概要

今回の記事では、Flutterのパッケージfluttertoastを使ってトースト（ポップアップの一種）を表示する手順を掲載する。

モバイル（Android、iOS）とWEBアプリ対応に対応してるやり方とBuildContextを使ったデスクトップアプリにも対応したやり方がある。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6
fluttertoast: 8.2.5

手順書

インストール編とコード編の2部構成です。

インストール編

ターミナルでコマンドを実行するか

flutter pub add fluttertoast

pubspec.yamlのdependencies:に下記のような感じで追加して

dependencies:
  fluttertoast: ^8.2.5

ターミナルでflutter pub getする。

flutter pub get

コード編

モバイル（Android、iOS）とWEBアプリ対応に対応してるやり方とBuildContextを使ったデスクトップアプリにも対応したやり方の2パターンを例を挙げる。

モバイルアプリとWEBアプリに対応したやり方

TextButtonをタップすると画面下部にピンクのトーストが表示される例。

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const FluttertoastSample1()
      )
    )
  );
}

class FluttertoastSample1 extends StatelessWidget {
  const FluttertoastSample1({super.key});

  void showToast() {
    Fluttertoast.showToast(
      msg: "I am toast!!!!!",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.pink,
      textColor: Colors.white,
      fontSize: 16.0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: SizedBox(
          width: double.infinity,
          child: TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Colors.blue,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            ),
            onPressed: showToast,
            child: const Padding(
              padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
              child: Text("Show Toast",
                  style: TextStyle(fontSize: 16.0, color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}

デスクトップアプリにも対応したやり方

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const FluttertoastSample2()
      )
    )
  );
}

class FluttertoastSample2 extends StatelessWidget {
  const FluttertoastSample2({super.key});

  @override
  Widget build(BuildContext context) {
    FToast fToast = FToast();
    fToast.init(context);

    return SafeArea(
      child: Center(
        child: SizedBox(
          width: double.infinity,
          child: TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Colors.blue,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            ),
            onPressed: () => {
              fToast.showToast(
                child: Container(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 24.0, vertical: 12.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25.0),
                    color: Colors.greenAccent,
                  ),
                  child: const Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.check),
                      SizedBox(
                        width: 12.0,
                      ),
                      Text("This is a Custom Toast"),
                    ],
                  ),
                ),
                gravity: ToastGravity.BOTTOM,
                toastDuration: Duration(seconds: 2),
              )
            },
            child: const Padding(
              padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
              child: Text("Show Toast",
                  style: TextStyle(fontSize: 16.0, color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}

まとめ（感想文）

ユーザーのアクションに対してフィードバックするのに使えるかもね！