[Flutter] Toast の設定

確認のメッセージなどを簡単にだしたいときはToastが便利です
Flutter の場合はfluttertoastのパッケージを使います
　

fluttertoast

fluttertoast には２種類あり
Build Context 無し、AndroidとiOS対応
Build Context 有り、全対応のケースです

ここではBuild Context 無しのケース見てみたいと思いますが、とてもシンプルです

No Build Context:

Fluttertoast.showToast(
        // メッセージ
        msg: "This is Toast",
        // 表示時間
        toastLength: Toast.LENGTH_SHORT,
        // 位置調整、中央
        gravity: ToastGravity.CENTER,
        // 秒単位の表示時間(除くAndroid)
        timeInSecForIosWeb: 1,
        // 背景色
        backgroundColor: Colors.red,
        // テキスト色
        textColor: Colors.white,
        // フォントサイズ
        fontSize: 16.0
    );

Fluttertoast.showToast(

// メッセージ

msg: "This is Toast",

// 表示時間

toastLength: Toast.LENGTH_SHORT,

// 位置調整、中央

gravity: ToastGravity.CENTER,

// 秒単位の表示時間(除くAndroid)

timeInSecForIosWeb: 1,

// 背景色

backgroundColor: Colors.red,

// テキスト色

textColor: Colors.white,

// フォントサイズ

fontSize: 16.0

);

目次
1. fluttertoast パッケージの追加
2. サンプルコード
3. 実行結果

fluttertoast パッケージの追加

ターミナルから fluttertoast パッケージを追加します

$ flutter pub add tluttertoast

1	$ flutter pub add tluttertoast

これにより、dependencesに

fluttertoast: ^xx.xx.xx

1	fluttertoast: ^xx.xx.xx

が追加されています
バージョンは適宜変更されます

パッケージを追加するとdependencesに追加されていることが分かります
pubspec.yaml

dependencies:
    flutter:
        sdk: flutter
  fluttertoast: ^8.2.6

dependencies:

flutter:

sdk: flutter

fluttertoast: ^8.2.6

サンプルコード

まとめてみます
main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterToast',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: _flutterToast(),
    );
  }

  Widget _flutterToast() {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FlutterToast'),
        centerTitle: true,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // fluttertoast
            Fluttertoast.showToast(
              // メッセージ
              msg: "This is Toast",
              // 表示時間
              toastLength: Toast.LENGTH_LONG,
              // 位置調整
              gravity: ToastGravity.BOTTOM,
              // 秒単位の表示時間(除くAndroid)
              timeInSecForIosWeb: 3,
              // 背景色
              backgroundColor: Colors.blue,
              // テキスト色
              textColor: Colors.white,
              // フォントサイズ
              fontSize: 24.0            
            );
          },
          child: const Text('FlutterToast'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:fluttertoast/fluttertoast.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'FlutterToast',

theme: ThemeData(

useMaterial3: true,

home: _flutterToast(),

);

}

Widget _flutterToast() {

return Scaffold(

appBar: AppBar(

title: const Text('FlutterToast'),

centerTitle: true,

body: Center(

child: ElevatedButton(

onPressed: () {

// fluttertoast

Fluttertoast.showToast(

// メッセージ

msg: "This is Toast",

// 表示時間

toastLength: Toast.LENGTH_LONG,

// 位置調整

gravity: ToastGravity.BOTTOM,

// 秒単位の表示時間(除くAndroid)

timeInSecForIosWeb: 3,

// 背景色

backgroundColor: Colors.blue,

// テキスト色

textColor: Colors.white,

// フォントサイズ

fontSize: 24.0

);

child: const Text('FlutterToast'),

);

}

実行結果

ボタンをタップすると
トーストが表示されます
　

　
　
Reference:
fluttertoast — Dart package