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?
166
Sie können mit auf das übergeordnete ScaffoldState
Element 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:
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),
),
);
}
}
showSnackBar()
sollte einScaffold
übergeordnetes Element haben .Verwenden Sie dieses Plugin
quelle
Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast)
SnackBar
ist definitiv die richtige Klasse, wie Darky betont hat.Eine schwierige Sache
showSnackBar
ist es, zum zu gelangenScaffoldState
, wenn Sie versuchen,showSnackBar
innerhalb der Build-Methode aufzurufen, in der Sie Ihre erstellenScaffold
.Möglicherweise wird ein Fehler wie dieser angezeigt, der Text enthält, in dem erläutert wird, wie das Problem gelöst werden kann.
Sie können entweder a
GlobalKey
an IhrenScaffold
Konstruktor übergeben:Oder Sie können ein verwenden
Builder
, um einBuildContext
untergeordnetes Element des Gerüsts zu erstellen .Schließlich können Sie Ihr Widget in mehrere Klassen aufteilen. Dies ist der beste langfristige Ansatz.
quelle
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
GlobalKey
als würden Sie a als Argument verwenden, bei dem aBuildContext
erwartet 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.Builder
Ihnen angegebenen Option gut funktioniert. Bin auf dieses Problem gestoßen und es hat es für mich gelöst.final key = new GlobalKey<ScaffoldState>();
außerhalb des Widget- Builds wurde behoben.Um eine Toastnachricht anzuzeigen, können Sie das flutterToast-Plugin verwenden, um dieses Plugin zu verwenden, das Sie benötigen
fluttertoast: ^3.1.0
$ flutter packages get
import 'package:fluttertoast/fluttertoast.dart';
benutze es so
Weitere Informationen finden Sie hier
quelle
Flattertoast: ^ 3.1.3
quelle
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
quelle
Importieren Sie die Bibliothek
Flattertoast: 3.1.3
Verwenden Sie wie unten
);
quelle
Falls das bisher angegebene Fluttertoast-Paket nicht funktioniert ... Dann schlage ich vor, dass Sie Toast versuchen .
Es hat keinen Schnickschnack und keine Zeremonie.
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.
quelle
pub.dartlang.org/packages/fluttertoast
Plugin. Dieser ist viel sauberer und prägnanter.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
Importieren Sie dann das Paket in die Datei, in der Sie Toast anzeigen möchten.
und letzter Schritt zeigen den Toast.
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.
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.
quelle
Für diejenigen, die nach einem suchen,
Toast
was die Routenänderungen überleben kann, ist diesSnackBar
möglicherweise nicht die beste Option.Schauen Sie sich
Overlay
stattdessen an.https://api.flutter.dev/flutter/widgets/Overlay-class.html
quelle
Fügen Sie flutter_just_toast zu Ihren Abhängigkeiten in Ihrer Pubspecs.yaml hinzu
Abhängigkeiten:
Nächstes Importpaket in Ihre Klasse:
Implementieren Sie Toast mit Nachricht
quelle
Verwenden Sie einfach SnackBar (Inhalt: Text ("Hallo")) in einem Ereignis wie onTap und onPress
Weitere Informationen zu Snackbar finden Sie hier https://flutter.dev/docs/cookbook/design/snackbars
quelle
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
quelle
Für Android Original Graphics Toast können Sie dies verwenden: https://pub.dartlang.org/packages/fluttertoast
Funktioniert gut unter Android und iOS. Geben Sie hier die Bildbeschreibung ein
quelle
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:
quelle
Schritt 1:
Abhängigkeiten:
Schritt 2:
Schritt 3:
quelle
Verwenden Sie diese Abhängigkeit:
toast: ^0.1.3
Importieren Sie dann die Abhängigkeit von Toast auf der Seite: undimport 'package:toast/toast.dart';
dann onTap () des Widgets:Toast.show("Toast plugin app", context,duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
quelle
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
quelle
Es gibt kein Widget für Toast im Flattern. Sie können zu diesem Plugin Usecase gehen:
quelle
Sie können die Bibliothek "Fluttertoast" verwenden. Fügen Sie dazu die Datei pubspec.yaml wie folgt hinzu:
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:
quelle
Importieren
cupertino_icons: ^0.1.2
und schreiben Sie den folgenden Codequelle
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
quelle
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!!!
quelle
Sie können dieses Paket verwenden: Toast
Fügen Sie diese Zeile Ihren Abhängigkeiten hinzu
dann benutze es so:
quelle
Sie können so etwas wie FlutterToast verwenden
Importieren Sie die Bibliothek
Verwenden Sie wie unten
Das ist es..
quelle