【Flutter】Toast|トースト表示

今回はToastの基本的な使い方を紹介します。

Toastを使えば画面上にトーストを表示できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|fluttertoastの導入

flutter pub add fluttertoast
import 'package:fluttertoast/fluttertoast.dart';

Toastを使用するにはFlutterパッケージfluttertoastを導入します。

Toastの使い方

ElevatedButton(
  child: Text('Show Toast'),
  onPressed: () {
    Fluttertoast.showToast(
      msg: "I am Toast!",
      fontSize: 16.0,
      textColor: Colors.white,
      backgroundColor: Colors.black54,
      timeInSecForIosWeb: 4,
    );
  },
),

Fluttertoast.showToastmsgにトーストで表示するテキストをString型で渡します。

timeInSecForIosWebでiOSとWebアプリのトースト表示時間を指定できます。デフォルトの表示時間は1秒です。

トーストの表示位置を指定

Fluttertoast.showToast(
  msg: "I am Toast!",
  fontSize: 16.0,
  textColor: Colors.white,
  backgroundColor: Colors.black54,
  timeInSecForIosWeb: 4,
  gravity: ToastGravity.CENTER,
);

gravityの引数にToastGravityを渡してトーストの表示位置を指定できます。

ToastGravity.TOP

ToastGravity.CENTER

ToastGravity.BOTTOM

トーストを非表示にする

Fluttertoast.cancel();

Fluttertoast.cancelを実行すれば、timeInSecForIosWebで指定した表示時間前にトーストを非表示できます。

サンプルコード

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: const Text('FlutterZero')),
        body: const CustomApp(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: Text('Show'),
            onPressed: () {
              Fluttertoast.showToast(
                msg: "I am Toast!",
                fontSize: 16.0,
                textColor: Colors.white,
                backgroundColor: Colors.black54,
                timeInSecForIosWeb: 4,
              );
            },
          ),
          ElevatedButton(
            child: Text('Cancel'),
            onPressed: () {
              Fluttertoast.cancel();
            },
          ),
        ],
      ),
    );
  }
}

参考

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