Wie erstelle ich Toast in Flutter?

166

Kann ich etwas Ähnliches wie Toast in Flutter erstellen ? Nur ein winziges Benachrichtigungsfenster, das sich nicht direkt im Gesicht des Benutzers befindet und die Ansicht dahinter nicht sperrt oder verblasst?

Aziza
quelle

Antworten:

204

Sie können mit auf das übergeordnete ScaffoldStateElement zugreifenScaffold.of(context)

Dann mach so etwas

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

Snackbars sind der offizielle "Toast" aus dem Materialdesign. Siehe https://material.io/design/components/snackbars.html#usage

Hier ist ein voll funktionsfähiges Beispiel:

Geben Sie hier die Bildbeschreibung ein

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),
      ),
    );
  }
}
Rémi Rousselet
quelle
1
Wie soll dies beispielsweise in ein onPressed verpackt werden? weil ich es ausprobiert habe und nichts auf dem Bildschirm erscheint.
Aziza
Nun, ich passe nie in die Form und ich weiß, dass "offiziell" nicht absolut bedeutet !! Die Snackbar ist für meine App UX wirklich zum Kotzen, daher halte ich mich davon fern und implementiere immer die ältere Benachrichtigung im schwebenden Popup-Stil. Ich finde es sehr einfach für Benutzer, Snackbar-Benachrichtigungen zu verpassen (insbesondere, wenn sie nicht daran gewöhnt sind). Es ist jedoch nicht leicht, ein Popup in der Mitte, oben oder unten auf dem Bildschirm zu übersehen.
SilSur
@aziza Wrap Sie Button Widget in Builder (), es wird funktionieren
Tabrizapps
Der Widget-Aufruf showSnackBar()sollte ein Scaffoldübergeordnetes Element haben .
Lahiru Chandima
79

Verwenden Sie dieses Plugin

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

Geben Sie hier die Bildbeschreibung ein

Raouf Rahiche
quelle
2
Sie müssen zuerst die Fluttertoast-Abhängigkeit in die Datei pubspec.yaml einfügen. Der Link zur Abhängigkeit ist hier [Link] ( pub.dartlang.org/packages/fluttertoast ). Dann können Sie den obigen Code verwenden
Fritz-Playmaker
Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast)
Robin
1
Jetzt funktioniert es, ich muss die App stoppen und 🏃‍♂️ ausführen, ohne zu debuggen :)
Robin
Jeder hatte das Problem, dass der runde Rand deaktiviert ist, nachdem bg color github.com/PonnamKarthik/FlutterToast/issues/156
thanhbinh84
72

SnackBar ist definitiv die richtige Klasse, wie Darky betont hat.

Imbissbude

Eine schwierige Sache showSnackBarist es, zum zu gelangen ScaffoldState, wenn Sie versuchen, showSnackBarinnerhalb der Build-Methode aufzurufen, in der Sie Ihre erstellen Scaffold.

Möglicherweise wird ein Fehler wie dieser angezeigt, der Text enthält, in dem erläutert wird, wie das Problem gelöst werden kann.

══╡ 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)
════════════════════════════════════════════════════════════════════════════════════════════════════

Sie können entweder a GlobalKeyan Ihren ScaffoldKonstruktor übergeben:

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

Oder Sie können ein verwenden Builder, um ein BuildContextuntergeordnetes Element des Gerüsts zu erstellen .

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

Schließlich können Sie Ihr Widget in mehrere Klassen aufteilen. Dies ist der beste langfristige Ansatz.

Collin Jackson
quelle
Versucht GlobalKey, jetzt bekomme ich diese Ausnahme: I/flutter ( 4965): The following assertion was thrown while handling a gesture: I/flutter ( 4965): type 'LabeledGlobalKey<ScaffoldState>' is not a subtype of type 'BuildContext' of 'context' where I/flutter ( 4965): LabeledGlobalKey is from package:flutter/src/widgets/framework.dart I/flutter ( 4965): ScaffoldState is from package:flutter/src/material/scaffold.dart I/flutter ( 4965): Scaffold is from package:flutter/src/material/scaffold.dart I/flutter ( 4965): BuildContext is from package:flutter/src/widgets/framework.dart
Shajeel Afzal
1
Es sieht so aus, GlobalKeyals würden Sie a als Argument verwenden, bei dem a BuildContexterwartet wird. Ich kann Ihnen nicht helfen, dies weiter zu debuggen, ohne mehr von Ihrem Code zu sehen. Bitte posten Sie die Codezeile, die die Ausnahme auslöst. Wahrscheinlich verwenden Sie einfach nicht die richtigen Argumente.
Collin Jackson
2
Ich kann bestätigen, dass die Verwendung der von BuilderIhnen angegebenen Option gut funktioniert. Bin auf dieses Problem gestoßen und es hat es für mich gelöst.
SeaFuzz
Ich habe einen Fehler mit der GlobalKey-Methode erhalten, aber die Deklaration final key = new GlobalKey<ScaffoldState>();außerhalb des Widget- Builds wurde behoben.
Sagar V
Eine der besten Antworten in StackOverflow! Danke @CollinJackson
Masterfego
13

Um eine Toastnachricht anzuzeigen, können Sie das flutterToast-Plugin verwenden, um dieses Plugin zu verwenden, das Sie benötigen

  1. Fügen Sie diese Abhängigkeit zu Ihrer Datei pubspec.yaml hinzu: - fluttertoast: ^3.1.0
  2. Um das Paket zu erhalten, müssen Sie diesen Befehl ausführen: - $ flutter packages get
  3. Importieren Sie das Paket: - import 'package:fluttertoast/fluttertoast.dart';

benutze es so

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

Weitere Informationen finden Sie hier

Virendra Varma
quelle
24
Anstatt die gleiche Antwort zu beantworten, die von jemand anderem gepostet wurde, hätten Sie seine Antwort auch positiv bewerten können.
CopsOnRoad
7

Flattertoast: ^ 3.1.3

import 'package:fluttertoast/fluttertoast.dart';

Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIos: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
Fucukur
quelle
Bitte versuchen Sie, ein oder zwei beschreibende Sätze hinzuzufügen, die beschreiben, wo welcher Code abgelegt werden soll. So etwas wie "Paket zu Ihrer Pubspec hinzufügen" und "Im Code verwenden:"
Mlyko
6

Ich möchte eine alternative Lösung für die Verwendung von Paket-Flushbar anbieten. https://github.com/AndreHaueisen/flushbar
Wie im Paket angegeben: Verwenden Sie dieses Paket, wenn Sie weitere Anpassungen benötigen, wenn Sie Ihren Benutzer benachrichtigen. Für Android-Entwickler ist es gemacht, um Toast und Snackbars zu ersetzen.
Ein weiterer Vorschlag zur Verwendung der Flushbar Wie wird die Snackbar nach navigator.pop (Kontext) in Flutter angezeigt ?
Sie können flushbarPosition auch auf TOP oder BOTTOM setzen
Geben Sie hier die Bildbeschreibung ein

    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);
Chunhunghan
quelle
5

Importieren Sie die Bibliothek

Flattertoast: 3.1.3

Verwenden Sie wie unten

Fluttertoast.showToast(
msg: "Hello world",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,

);

nimal viju
quelle
4

Falls das bisher angegebene Fluttertoast-Paket nicht funktioniert ... Dann schlage ich vor, dass Sie Toast versuchen .
Es hat keinen Schnickschnack und keine Zeremonie.

Geben Sie hier die Bildbeschreibung ein

Es funktioniert einfach.

Ich habe jedoch einen Fehler in dem Beispiel in der Readme-Datei festgestellt:

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

Während die Methode einen Kontext erfordert. Fügen Sie also gut 'Kontext' wie folgt hinzu:

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

Es besteht die Möglichkeit, dass dies behoben war, als Sie dies überprüft haben. Ich habe bereits eine PR eingereicht.

Wale
quelle
Ich bevorzuge dieses Plugin gegenüber dem pub.dartlang.org/packages/fluttertoastPlugin. Dieser ist viel sauberer und prägnanter.
SilSur
2

Es gibt drei Möglichkeiten, Toast auf Flatter App zu zeigen.
Ich werde Ihnen alle drei Arten erzählen, die ich kenne, und auswählen, welche Sie verwenden möchten. Ich würde den zweiten empfehlen.

1: Verwendung eines externen Pakets.

Dies ist die erste Methode, mit der Toast in der Flatter-App am einfachsten angezeigt werden kann.

Zunächst müssen Sie dieses Paket in pubspec.yaml hinzufügen

flutter_just_toast:^version_here

Importieren Sie dann das Paket in die Datei, in der Sie Toast anzeigen möchten.

'package:flutter_just_toast/flutter_just_toast.dart';

und letzter Schritt zeigen den Toast.

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

2: auf offizielle Weise.

Diese Methode ist auch einfach, aber Sie müssen damit umgehen. Ich sage nicht, dass es schwer ist, es ist einfach und sauber. Ich würde diese Methode empfehlen.

Für diese Methode müssen Sie nur den folgenden Code verwenden, um Toast zu zeigen.

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

Denken Sie jedoch daran, dass Sie den Gerüstkontext verwenden müssen.

3: mit nativer API.

Jetzt macht diese Methode keinen Sinn mehr, wenn Sie bereits über die beiden oben genannten Methoden verfügen. Mit dieser Methode müssen Sie nativen Code für Android und iOS schreiben und ihn dann in ein Plugin konvertieren, und schon können Sie loslegen. Diese Methode verbraucht Ihre Zeit und Sie müssen das Rad neu erfinden. das wurde bereits erfunden.

Zakria Khan
quelle
1

Für diejenigen, die nach einem suchen, Toastwas die Routenänderungen überleben kann, ist dies SnackBarmöglicherweise nicht die beste Option.

Schauen Sie sich Overlaystattdessen an.

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

Stefano Saitta
quelle
1

Fügen Sie flutter_just_toast zu Ihren Abhängigkeiten in Ihrer Pubspecs.yaml hinzu

Abhängigkeiten:

flutter_just_toast: ^1.0.1

Nächstes Importpaket in Ihre Klasse:

import 'package:flutter_just_toast/flutter_just_toast.dart';

Implementieren Sie Toast mit Nachricht

Toast.show( message: "Your toast message", 
    duration: Delay.SHORT, 
    textColor: Colors.black);
McShaba
quelle
1

Dafür gibt es verschiedene Versionen.

1) Zunächst können Sie SnackBar verwenden, ein Widget in Flutter.

2) Sie können Bibliotheken wie toast, flutter_toast von pub.dev verwenden.

3) Die dritte Version erstellt Ihr benutzerdefiniertes Widget. Es kann mit dem Überlagerungs-Widget und der Animation in Flutter erstellt werden.

In diesem Tutorial erfahren Sie mehr darüber. Hier ist ein Link

Kanan Yusubov
quelle
0

https://pub.dev/packages/toast benutze dies für Toast Diese Bibliothek ist ziemlich einfach zu bedienen und perfekte Arbeit für iOS und Android,

Syntax für Show Toast:

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

Schritt 1:

Abhängigkeiten:

flutter_just_toast: ^1.0.1

Schritt 2:

import 'package:flutter_just_toast/flutter_just_toast.dart';

Schritt 3:

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

Alan John
quelle
0

Verwenden Sie diese Abhängigkeit: toast: ^0.1.3 Importieren Sie dann die Abhängigkeit von Toast auf der Seite: und import 'package:toast/toast.dart'; dann onTap () des Widgets: Toast.show("Toast plugin app", context,duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);

AMAL KG
quelle
0

Holen Sie sich hier ein Flatter-Toast-Paket

Fügen Sie dieses Paket Ihren Projektabhängigkeiten in pubspec.yaml hinzu

Wann immer Sie möchten, dass der Toast wie auf Knopfdruck angezeigt wird

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

Es gibt kein Widget für Toast im Flattern. Sie können zu diesem Plugin Usecase gehen:

Fluttertoast.showToast(
msg: "My toast messge",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,);
Ramesh Giri
quelle
0

Sie können die Bibliothek "Fluttertoast" verwenden. Fügen Sie dazu die Datei pubspec.yaml wie folgt hinzu:

dependencies:
  fluttertoast: ^3.1.0

Importieren Sie dann diese Bibliothek in die Dartdatei, für die Sie den Toast benötigen, und schreiben Sie Ihren Code. Beziehen Sie sich beispielsweise auf den folgenden Code:

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



class ToastExample extends StatefulWidget {
    @override
    _ToastExampleState createState() {
      return _ToastExampleState();
    }
  }

  class _ToastExampleState extends State {
    void showToast() {
      Fluttertoast.showToast(
          msg: 'Some text',
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          timeInSecForIos: 1,
          backgroundColor: Colors.red,
          textColor: Colors.white
      );
    }

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Toast Tutorial',
        home: Scaffold(
            appBar: AppBar(
              title: Text('Toast Tutorial'),
            ),
            body: Padding(
              padding: EdgeInsets.all(15.0),
              child: Center(
                child: RaisedButton(
                  child: Text('Press to show'),
                  onPressed: showToast,
                ),
              ),
            )
        ),
      );
    }
  }

  void main() => runApp(ToastExample());
sathwik
quelle
0

Importieren cupertino_icons: ^0.1.2 und schreiben Sie den folgenden Code

showToast(BuildContext context, String message) {
 showDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog( 
title: Text("Name of App",
          content: Text(message,
          actions: <Widget>[
            FlatButton(
              child: Text("OK"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        );
      });
Aamil Silawat
quelle
0

Verwenden Sie für die Toastnachricht im Flattern die Bibliothek bot_toast . Diese Bibliothek bietet zahlreiche Funktionen und Unterstützung für die Anzeige von Benachrichtigungen, Text, Laden, Anhängen usw. Toast

Geben Sie hier die Bildbeschreibung ein

Dhaval Kansara
quelle
0

Es ist ganz einfach,

Wir müssen nur das Flatter-Toast-Paket installieren. Weitere Informationen finden Sie in der folgenden Dokumentation: https://pub.dev/packages/fluttertoast

Auf der Registerkarte Installation erhalten Sie die Abhängigkeit, die Sie in die Datei pubspec.yaml einfügen und anschließend installieren müssen.

Danach importieren Sie einfach das Paket:

import 'package: fluttertoast / fluttertoast.dart';

Ähnlich wie in der obigen Zeile.

Und dann können Sie mit der FlutterToast-Klasse Ihren Fluttertoast verwenden.

Du bist fertig!!!

Prajwal Shinde
quelle
-1

Sie können dieses Paket verwenden: Toast

Fügen Sie diese Zeile Ihren Abhängigkeiten hinzu

toast: ^0.1.5

dann benutze es so:

import 'package:toast/toast.dart';
Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);
Djamel Madani
quelle
-3

Sie können so etwas wie FlutterToast verwenden

Importieren Sie die Bibliothek

fluttertoast: ^2.1.4

Verwenden Sie wie unten

Fluttertoast.showToast(
    msg: "Hello world",
    textColor: Colors.white,
    toastLength: Toast.LENGTH_SHORT,
    timeInSecForIos: 1,
    gravity: ToastGravity.BOTTOM,
    backgroundColor: Colors.indigo,
);

Das ist es..

Android Dev
quelle