【Flutter】Fluttertoastの使い方｜トーストを表示する

2023年2月2日2024年1月31日

「Flutterアプリでトーストを表示したい」

こんな時に便利なのがfluttertoastパッケージの Fluttertoast ウィジェットです。

Fluttertoastを使えばアプリの画面下部から短いメッセージをポップアップ表示し一定時間で表示が消えるトーストを実装できます。

それではFluttertoastの基本的な使い方とカスタマイズ方法について解説していきます！

パッケージのインストール

まずはfluttertoastパッケージをFlutterプロジェクトにインストールします。

ターミナルで次のコマンドを実行してpubspec.yamlファイルにfl_chartを追加します。

flutter pub add fluttertoast

次にfluttertoastを使用するdartファイルに次のコードをコピペします。

import 'package:fluttertoast/fluttertoast.dart';

あわせて読みたい

【Flutter】pub.devからパッケージをインストール｜ドキュメントの見方は？ Flutterでは様々なユーザーが作成＆公開しているウィジェットや関数を「pub.dev(Dart packages)」から外部パッケージとして導入できます。今回は実際に外部パッケージを…

あわせて読みたい

【Flutter】外部パッケージをインストールできない時の対処法 pub.dev(Dart packages)から外部パッケージをインストールできない方のために、原因と思われるいくつかの事例と対処法を紹介します。Flutterで外部パッケージを初めて導…

基本的な使い方

Fluttertoastの基本的な使い方について解説します。

トーストを表示させるには「Fluttertoast」クラスの「showToast」メソッドを使用します。

「showToast」の「msg」にトーストで表示させる文字列を渡します。文字の大きさは「fontSize」で指定できます。

ElevatedButton(
  child: Text('トーストを表示'),
  onPressed: () {
    Fluttertoast.showToast(
      msg: 'Hello World',
      fontSize: 18,
    );
  },
),

画像のサンプルコード

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter'),
      ),
      body: ElevatedButton(
        child: Text('トースト表示'),
        onPressed: () {
          Fluttertoast.showToast(
            msg: 'Hello World',
            fontSize: 18,
          );
        },
      ),
    );
  }
}

カスタマイズ方法

続いてFluttertoastのカスタマイズ方法について解説します。

トーストの背景色・文字色を変更する

トーストの背景色を変更するには「backgroundColor」、文字色を変更するには「textColor」を使用します。

ElevatedButton(
  child: Text('トーストを表示'),
  onPressed: () {
    Fluttertoast.showToast(
      msg: 'Hello World',
      fontSize: 18,
      textColor: Colors.white,
      backgroundColor: Colors.orange,
    );
  },
),

トーストの表示位置を変更する

トーストの表示位置は「gravity」で指定できます。

上から表示させたい場合は「gravity」に「ToastGravity.TOP」を渡します。

ElevatedButton(
  child: Text('トーストを表示'),
  onPressed: () {
    Fluttertoast.showToast(
      msg: 'Hello World',
      fontSize: 18,
      textColor: Colors.white,
      backgroundColor: Colors.orange,
      gravity: ToastGravity.CENTER,
    );
  },
),

以上です。