FlutterToastの使い方

image

fluttertoastとは画面下の「ボタンを押したよ!」と表示しているものです。

fluttertoastデモ

Version

  • Flutter 2.5.1
  • Dart 2.14.2
  • fluttertoast: ^8.0.8

パッケージのインストール

まずはアプリにfluttertoastのパッケージをインストールをします。パッケージのインストール先はpubspec.yamlファイルです。 fluttertoastのパッケージはこちらになります。

pubspec.yamlファイルのdependenciesに以下のように記述します。 pubspec.yamlファイルは非常にデリケートなので記述する箇所のindent等には注意が必要です。

dependencies:
  flutter:
    sdk: flutter

  fluttertoast: ^8.0.8

dependenciesの箇所に上記のように記述したら、画面上のpub getボタン、もしくはターミナルでflutter pub getを入力して実行します。

メッセージやターミナルでエラーが吐かれなければ、アプリにfluttertoastのインストールが完了したことになります。

コード全文

続いて、実際にfluttertoastの実装の説明に移ります。 コードは以下のようになっております。

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);

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterToast',
      //画面右上の赤いバーナーを消す
      debugShowCheckedModeBanner: false,
      home: _flutterToastExample(),
    );
  }

  Widget _flutterToastExample() {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FlutterToast'),
        centerTitle: true,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Fluttertoast.showToast(
              msg: 'ボタンを押したよ!',
              toastLength: Toast.LENGTH_LONG,
            );
          },
          child: const Text('FlutterToast'),
        ),
      ),
    );
  }
}

FlutterToastの実装(↑のコード全文の一部を説明)

ButtonなどのonPressedパラメーター内で実装

ElevatedButtonTextButtonなどのWidgetのonPressedパラメーターにFluttertoast.showToastを設定します。

ElevatedButton(
          onPressed: () {
            Fluttertoast.showToast();
          },
          child: const Text('FlutterToast'),
        ),

※この状態では、fluttertoastで表示する文字が設定されていないのでエラーとなっています。

msgなどのパラメーターを設定してカスタマイズ

msgにはfluttertoastに表示するテキストを入力します。テキストは主にユーザーに伝えたい「処理した内容」などを書くのが一般的です。

他には、fluttertoastが画面に表示されている時間を指定するtoastLengthfluttertoastを画面のどの位置に表示するかを指定するgravityなどがあります。

toastLengthのデフォルトはToast.LENGTH_SHORTで1秒間表示となっています。因みにToast..LENGTH_LONGは5秒間の表示です。

gravityのデフォルトはToastGravity.BOTTOMで画面中央の下に表示されるようになっています。 ご自身が作成しているアプリの仕様によって、ユーザーが使いやすいようにカスタマイズされればと思います。

さいごに

いかがでしたでしょうか。fluttertoastの実装自体はすごく簡単だったと思います。

実装は簡単であるが、アプリを使うユーザーにとって処理が完了したことなどをメッセージで知らせてくれるfluttertoastはアプリの使いやすさを高めてくれる最高のツールであると言えます。

この記事はfluttertoastの最低限の機能だけを紹介しました。 皆さんがfluttertoastを実装される時に参考にしていただけたら幸いです。

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More