【Flutter】トースト表示【日本語】

Flutterのライブラリであるfluttertoastを使ってトースト表示をしてみた。

また、実装したときに「No implementation found for method showToast on channel PonnamKarthik/fluttertoast」エラーが出たので、その対処法もメモ。

※他のプログラミングに関する記事はこちら

 

スポンサーリンク

作ったアプリ

テストというボタンを押したときに、「トースト表示」と表示させるアプリを作った。

 

上記アプリの全コードは以下の通り。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ElevatedButton(
        child: const Text('テスト'),
        style: ElevatedButton.styleFrom(
          primary: Colors.blue,
          onPrimary: Colors.black,
        ),
        onPressed: () {
          Fluttertoast.showToast(msg: 'トースト表示');
        },
      ),
    );
  }
}

スポンサーリンク

実装手順

まずはpubspec.yamlにて、fluttertoastライブラリを宣言(以下コードの13行目の記述)

pubspec.yaml

name: test_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  fluttertoast: ^8.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

 

あとは、fluttertoastをインポートして(以下コードの2行目)、Fluttertoast.showToastでトースト表示する内容を設定(以下コードの46行目)すればOK。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ElevatedButton(
        child: const Text('テスト'),
        style: ElevatedButton.styleFrom(
          primary: Colors.blue,
          onPrimary: Colors.black,
        ),
        onPressed: () {
          Fluttertoast.showToast(msg: 'トースト表示');
        },
      ),
    );
  }
}

 

設定できるオプションは以下サイト参照。

Dart packages

Toast Library for Flutter, Easily create toast messages in s…

スポンサーリンク

エラー対処

自分がFlutterToastを実装した際には、「No implementation found for method showToast on channel PonnamKarthik/fluttertoast」が発生した。

このエラーが発生した場合、VSCodeのコマンドパレットで「Flutter Clean Project」を行い、エミュにインストールしていたアプリをアンインストールしてから再度インストールすると動く。

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク