【Flutter】Fluttertoastの表示を途中でキャンセルする

2023年2月2日

「Fluttertoast」で表示されたトーストを途中でキャンセルさせる方法を紹介します。

今回はトーストの非表示ボタンを実装していきます。

トーストを途中でキャンセルさせる方法

「Fluttertoast.showToast」で表示されたトーストを非表示するには「Fluttertoast.cancel」を使用します。

トーストが表示されている最中に「cancel」メソッドが実行されると直ちに非表示されます。

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      child: Text('トーストを表示'),
      onPressed: () {
        Fluttertoast.showToast(
          msg: 'Hello World',
          fontSize: 18,
          timeInSecForIosWeb: 10,
        );
      },
    ),
    ElevatedButton(
      child: Text('トーストを非表示'),
      onPressed: () {
        Fluttertoast.cancel();
      },
    ),
  ],
),

サンプルコード

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: Text('トーストを表示'),
                onPressed: () {
                  Fluttertoast.showToast(
                    msg: 'Hello World',
                    fontSize: 18,
                    timeInSecForIosWeb: 10,
                  );
                },
              ),
              ElevatedButton(
                child: Text('トーストを非表示'),
                onPressed: () {
                  Fluttertoast.cancel();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上です。

【Flutter】Fluttertoastの表示を途中でキャンセルする

トーストを途中でキャンセルさせる方法

サンプルコード

合わせて読みたい

参考サイト