[Flutter] トーストを表示する

今回はAndroidエンジニアならおなじみのトーストを取り上げます。
なにかの処理がうまく行かなかったときにユーザーにメッセージで伝えたいようなケースでは、AndroidならToastを活用するかと思います。
しかし、FlutterではSDK標準のトーストは用意されていないため、別途ライブラリを組み込んでやる必要があります。
今回はFlutterToastというライブラリを紹介していきます。

それでははじめましょう。

FlutterToastのプロジェクト追加

まずはライブラリである、FlutterToastを取り込みましょう。
最新のバージョンは以下のサイトを確認してください。ここでは、現在の最新の3.1.3を元に説明します。
https://pub.dev/packages/fluttertoast

まずはルートディレクトリにあるpubspec.yamlを開き、dependencies:に以下のように追記を行います。

dependencies:
  :
  :
  fluttertoast: ^3.1.3

その上で、Android Studioであれば画面上部にある「Packages get」をクリックするか、ターミナルであれば以下のコマンドを実行すると、パッケージがプロジェクトに取り込まれます。

flutter packages get

ここまで完了したら準備完了です。
今回の以下のコードを実装してください。

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('サンプル'),
      ),
      body: RaisedButton(
        child: Text('トーストの表示'),
        onPressed: () {
          Fluttertoast.showToast(msg: 'ボタンがウリックされました');
        },
      ),
    );
  }
}

今回はボタンをクリックしたら、トーストを表示しようとしています。
Fluttertoast.showToast()で、引数msgに表示したいメッセージを渡すと、トーストが表示してくれます。
これだけでAndroid / iOSどちらも同じような挙動が実現できるのですから、とても便利なライブラリだと思います。

実行結果

実行結果は以下のようになります。

Android

iOS

お疲れさまでした。