【Flutter】画面上から通知バナーをポップアップ表示

2023年2月2日

Flutterで画面上から通知バナー(トースト)をポップアップ表示させる方法を紹介します。

今回は「Fluttertoast」を使用してトーストを実装していきます。

パッケージの導入

下記コマンドを実行してpub.devのパッケージ「fluttertoast」をpubspec.yamlに追加します。

flutter pub add fluttertoast

次にdartファイルに下記コードをコピペします。

import 'package:fluttertoast/fluttertoast.dart';

画面上からトーストを表示させる方法

「Fluttertoast」で画面上からトーストを表示させるには「showToast」メソッドで「gravity」に「ToastGravity.TOP」を渡します。

デフォルトでは画面下から表示される「ToastGravity.BOTTOM」になっています。

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

サンプルコード

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: ElevatedButton(
            child: Text('トーストを表示'),
            onPressed: () {
              Fluttertoast.showToast(
                msg: 'Hello World',
                fontSize: 18,
                backgroundColor: Colors.orange,
                gravity: ToastGravity.TOP,
              );
            },
          ),
        ),
      ),
    );
  }
}

以上です。