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を実装される時に参考にしていただけたら幸いです。

お知らせ

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

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

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

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More

タグ

Flutter (113)初心者向け (28)イベント (18)Google Apps Script (15)Nextjs (12)可茂IT塾 (9)Firebase (7)riverpod (6)React (6)ChatGPT (5)vscode (5)デザイン (5)新卒 (4)就活 (4)Figma (4)Dart (4)JavaScript (4)お知らせ (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)Git (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)Google (1)Web (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)コード生成 (1)GitHub Copilot (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)ヒーター (1)作業効率 (1) (1)Flutter実践開発 (1) (1)permission_handler (1)flutter_local_notifications (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)VRChat (1)API (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)FlutterFlow (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

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

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

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

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More