web-dev-qa-db-ja.com

FlutterでToastを作成する方法？

Flutterで Toasts のようなものを作成できますか？ユーザーに直接表示されず、その背後にあるビューをロックまたはフェードしない、ごくわずかな通知ウィンドウですか？

flutter
71
aziza

Scaffold.of(context)を使用して、親ScaffoldStateにアクセスできます。

それから何かをする

Scaffold.of(context).showSnackBar(new SnackBar(
      content: new Text("Sending Message"),
    ));

スナックバーは材料設計からの公式の「トースト」です。 https://material.io/design/components/snackbars.html#usage を参照してください。

これが完全に機能する例です。

enter image description here

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snack bar'),
      ),

      /// We use [Builder] here to use a [context] that is a descendant of [Scaffold]
      /// or else [Scaffold.of] will return null
      body: Builder(
        builder: (context) => Center(
              child: RaisedButton(
                child: const Text('Show toast'),
                onPressed: () => _showToast(context),
              ),
            ),
      ),
    );
  }

  void _showToast(BuildContext context) {
    final scaffold = Scaffold.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: const Text('Added to favorite'),
        action: SnackBarAction(
            label: 'UNDO', onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
  }
}
88
Rémi Rousselet

Darkyが指摘しているように、SnackBarは間違いなく正しいクラスです。

snackbar

showSnackBarを構築する場所であるbuildメソッド内でScaffoldStateを呼び出そうとしているのであれば、showSnackBarに関する1つの難しいことは、Scaffoldを取得することです。

あなたはこのようなエラーを見るかもしれません、それは問題を解決する方法を説明するいくつかのテキストを含みます。

══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
Scaffold.of() called with a context that does not contain a Scaffold.
No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of(). This
usually happens when the context provided is from the same StatefulWidget as that whose build
function actually creates the Scaffold widget being sought.
There are several ways to avoid this problem. The simplest is to use a Builder to get a context that
is "under" the Scaffold. For an example of this, please see the documentation for Scaffold.of():
  https://docs.flutter.io/flutter/material/Scaffold/of.html
A more efficient solution is to split your build function into several widgets. This introduces a
new context from which you can obtain the Scaffold. In this solution, you would have an outer widget
that creates the Scaffold populated by instances of your new inner widgets, and then in these inner
widgets you would use Scaffold.of().
A less elegant but more expedient solution is assign a GlobalKey to the Scaffold, then use the
key.currentState property to obtain the ScaffoldState rather than using the Scaffold.of() function.
The context used was:
  MyHomePage
When the exception was thrown, this was the stack:
#0      Scaffold.of (package:flutter/src/material/scaffold.Dart:444:5)
#1      MyHomePage.build.<anonymous closure> (/Users/jackson/Library/Developer/CoreSimulator/Devices/7072C907-DBAD-44FE-8F40-0257442C51D9/data/Containers/Data/Application/77FEC1A4-1453-442C-8208-96E0323DEFB2/tmp/so_scratch2Tkq9Jb/so_scratch2/lib/main.Dart:23:24)
#2      _InkResponseState._handleTap (package:flutter/src/material/ink_well.Dart:323:14)
#3      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.Dart:375:30)
#4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.Dart:102:24)
#5      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.Dart:149:9)
#6      TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.Dart:119:7)
#7      GestureArenaManager.sweep (package:flutter/src/gestures/arena.Dart:156:27)
#8      BindingBase&SchedulerBinding&GestureBinding.handleEvent (package:flutter/src/gestures/binding.Dart:147:20)
#9      BindingBase&SchedulerBinding&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.Dart:121:22)
#10     BindingBase&SchedulerBinding&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.Dart:101:7)
#11     BindingBase&SchedulerBinding&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.Dart:64:7)
#12     BindingBase&SchedulerBinding&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.Dart:48:7)
#13     _invoke1 (file:///b/build/slave/Mac_Engine/build/src/flutter/lib/ui/hooks.Dart:100)
#14     _dispatchPointerDataPacket (file:///b/build/slave/Mac_Engine/build/src/flutter/lib/ui/hooks.Dart:58)
Handler: onTap
Recognizer:
  TapGestureRecognizer#69dbc(debugOwner: GestureDetector, state: ready)
════════════════════════════════════════════════════════════════════════════════════════════════════

GlobalKeyをScaffoldコンストラクタに渡すことができます。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final key = new GlobalKey<ScaffoldState>();
    return new Scaffold(
      key: key,
      floatingActionButton: new Builder(
        builder: (BuildContext context) {
          return new FloatingActionButton(
            onPressed: () {
              key.currentState.showSnackBar(new SnackBar(
                content: new Text("Sending Message"),
              ));
            },
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          );
        }
      ),
    );
  }
}

あるいは、Builderを使って、足場の子であるBuildContextを作成することもできます。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new Builder(
        builder: (BuildContext context) {
          return new FloatingActionButton(
            onPressed: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("Sending Message"),
              ));
            },
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          );
        }
      ),
    );
  }
}

最後に、ウィジェットを複数のクラスに分割することができます。これは長期的な最善の方法です。

46
Collin Jackson

これを使う plugin

Fluttertoast.showToast(
        msg: "This is Toast messaget",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIos: 1
    );

enter image description here

37
Raouf Rahiche

トーストメッセージを表示するには、flutterToastプラグインを使用してこのプラグインを使用する必要があります。

  1. この依存関係をあなたのpubspec.yamlファイルに追加してください。 - fluttertoast: ^2.0.7
  2. パッケージを入手するには、このコマンドを実行する必要があります。 - $ flutter packages get
  3. パッケージをインポートします。 - import 'package:fluttertoast/fluttertoast.Dart';

このように使う

Fluttertoast.showToast(
        msg: "your message",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM // also possible "TOP" and "CENTER"
        backgroundColor: "#e74c3c",
        textColor: '#ffffff');

より詳しい情報は--- this を参照してください。

7
Virendra Varma

これまでに与えられたFluttertoastパッケージがうまくいかない場合…それでは toast を試してみることをお勧めします。
フリルも儀式もありません。

enter image description here

それだけでうまくいきます。

私はそのReadmeの中で与えられた例の中にバグがあるのに気づいた：

Toast.show("Toast plugin app", duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);

メソッドはコンテキストを必要としますが。だから、このような「コンテキスト」を追加するためにうまくやる：

Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);

これはあなたがチェックした時までに修正されていた可能性があります、私はすでにPRを提出しました。

1
Wale

パッケージflushbarを使用するための代替ソリューションを提供したいと思います。 https://github.com/AndreHaueisen/flushbar
パッケージが言ったように：あなたのユーザに通知するときもっとカスタマイズが必要な場合はこのパッケージを使ってください。 Android開発者にとっては、トーストやスナックバーの代わりになるように作られています。
flushbarを使用するためのもう1つの提案 Flutterでnavigator.pop（context）の後にsnackbarを表示する方法？
flushbarPositionをTOPまたはBOTTOMに設定することもできます。
enter image description here

    Flushbar(
      title: "Hey Ninja",
      message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP,
      flushbarStyle: FlushbarStyle.FLOATING,
      reverseAnimationCurve: Curves.decelerate,
      forwardAnimationCurve: Curves.elasticOut,
      backgroundColor: Colors.red,
      boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)],
      backgroundGradient: LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: false,
      duration: Duration(seconds: 4),
      icon: Icon(
        Icons.check,
        color: Colors.greenAccent,
      ),
      mainButton: FlatButton(
        onPressed: () {},
        child: Text(
          "CLAP",
          style: TextStyle(color: Colors.amber),
        ),
      ),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: "ShadowsIntoLightTwo"),
      ),
      messageText: Text(
        "You killed that giant monster in the city. Congratulations!",
        style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: "ShadowsIntoLightTwo"),
      ),
    )..show(context);
0
chunhunghan

Toastを探している人にとっては、ルートの変更に耐えることができるものはSnackBarが最良の選択肢ではないかもしれません。

代わりにOverlayをご覧ください。

https://api.flutter.dev/flutter/widgets/Overlay-class.html

0
Stefano Saitta

Androidのオリジナルグラフィックトーストの場合は、これを使用できます。 https://pub.dartlang.org/packages/fluttertoast

AndroidとiOSでは問題なく動作します。 ここに画像の説明を入力してください

0
Lukas Marik

https://pub.dev/packages/toast これをトーストに使用するこのライブラリは使いやすく、iOSとAndroidに最適です。

Show Toastの構文：

Toast.show("Toast plugin app", duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);
0
M.Bilal Murtaza

この依存関係を使用してください：toast: ^0.1.3それからページにtoastの依存関係をインポートしてください：import 'package:toast/toast.Dart';それからウィジェットのonTap（）の上：Toast.show("Toast plugin app", context,duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);

0
AMAL K G

ステップ1：

依存関係：

flutter_just_toast: ^1.0.1

ステップ2：

import 'package:flutter_just_toast/flutter_just_toast.Dart';

ステップ3：

Toast.show(
message: "Your toast message",
duration: Delay.SHORT,
textColor: Colors.black);
0
Alan John