Udemyセール開催中! 対象コースが1,220円から

【Flutter】Fluttertoastの使い方|Toast(トースト)を表示させる

今回は外部パッケージ「fluttertoast」の「FlutterToast」を使用してトースト表示させる方法を紹介します。

目次

「fluttertoast」の導入

$ flutter pub add fluttertoast
$ flutter pub get

pubspec.yamlにパッケージを追加・更新

import 'package:fluttertoast/fluttertoast.dart';

dartファイルにコピペ

Fluttertoast.showToast()

Fluttertoast.showToast(
  msg: "トースト表示成功!",
  gravity: ToastGravity.BOTTOM,
  timeInSecForIosWeb: 5,
  toastLength: Toast.LENGTH_SHORT,
  backgroundColor: Colors.red[300],
  textColor: Colors.white,
  fontSize: 16.0,
);

FluttertoastのshowToastメソッドを使用してトーストを表示できます。

msgトースト表示のテキスト
gravityトースト表示位置
timeInSecForIosWeb(iOS, Web用)表示時間をint型で指定
toastLength(Android用)表示時間を指定
Toast.LENGTH_SHORT:1秒
Toast.LENGTH_LONG:5秒
backgroundColor背景色
textColor文字色
fontSizeフォントサイズ

Fluttertoast.cancel()

Fluttertoast.cancel();

トーストが表示されている最中に消すにはcancelメソッドを使用します。

サンプルコード

iOSの場合、表示ボタンをクリックすると5秒間トーストが表示され、キャンセルボタンをクリックすると表示されているトーストが直ちにキャンセルされます。

//ソース
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                    msg: "トースト表示成功!",
                    toastLength: Toast.LENGTH_SHORT,
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 5,
                    backgroundColor: Colors.red[300],
                    textColor: Colors.white,
                    fontSize: 16.0,
                  );
                },
                child: Text('表示'),
              ),
              ElevatedButton(
                onPressed: () {
                  Fluttertoast.cancel();
                },
                child: Text('キャンセル'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上です。

  • URLをコピーしました!
目次
閉じる