Respuestas:
Puede acceder al padre ScaffoldState
usandoScaffold.of(context)
Entonces haz algo como
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Sending Message"),
));
Los Snackbars son el "Brindis" oficial del diseño de materiales. Ver https://material.io/design/components/snackbars.html#usage
Aquí hay un ejemplo completamente funcional:
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()
debe tener un Scaffold
padre.
Usa este plugin
Fluttertoast.showToast(
msg: "This is Toast messaget",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: 1
);
Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast)
SnackBar
definitivamente es la clase correcta para usar, como lo señaló Darky.
Una cosa difícil showSnackBar
es llegar al ScaffoldState
, si está intentando llamar showSnackBar
dentro del método de construcción donde construye su Scaffold
.
Es posible que vea un error como este, que incluye texto que explica cómo resolver el problema.
══╡ 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)
════════════════════════════════════════════════════════════════════════════════════════════════════
Puedes pasar un GlobalKey
a tu Scaffold
constructor:
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),
);
}
),
);
}
}
O puede usar a Builder
para crear BuildContext
un hijo del Andamio.
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),
);
}
),
);
}
}
Finalmente, puede dividir su widget en varias clases, que es el mejor enfoque a largo plazo.
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
como argumento donde BuildContext
se espera a. No puedo ayudarte a depurar esto aún más sin ver más de tu código. Publique la línea de código que arroja la excepción, probablemente simplemente no esté utilizando los argumentos correctos.
Builder
opción que diste funciona bien. Me encontré con este problema y esto lo resolvió por mí.
final key = new GlobalKey<ScaffoldState>();
fuera de Widget build.
para mostrar el mensaje de brindis, puede usar el complemento flutterToast para usar este complemento, debe
fluttertoast: ^3.1.0
$ flutter packages get
import 'package:fluttertoast/fluttertoast.dart';
úsalo así
Fluttertoast.showToast(
msg: "your message",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM // also possible "TOP" and "CENTER"
backgroundColor: "#e74c3c",
textColor: '#ffffff');
Para más información revisa esto
fluttertoast: ^ 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
);
Me gustaría proporcionar una solución alternativa para usar la barra de descarga del paquete.
https://github.com/AndreHaueisen/flushbar
Como decía el paquete: use este paquete si necesita más personalización al notificar a su usuario. Para los desarrolladores de Android, está hecho para sustituir tostadas y bares.
Otra sugerencia para usar flushbar ¿Cómo mostrar snackbar después de navigator.pop (contexto) en Flutter?
También puede establecer flushbarPosition en TOP o BOTTOM
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);
Importar la lib
fluttertoast: 3.1.3
Use como a continuación
Fluttertoast.showToast(
msg: "Hello world",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,
);
En caso de que el paquete Fluttertoast proporcionado hasta ahora no funcione ... Entonces te sugiero que pruebes tostadas .
No tiene lujos ni ceremonia.
Simplemente funciona
Sin embargo, noté un error en el ejemplo dado en su archivo Léame:
Toast.show("Toast plugin app", duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
Si bien el método requiere un contexto. Así que haz bien en agregar 'contexto' como este:
Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
Sin embargo, existe la posibilidad de que esto se haya solucionado para el momento en que lo verificó, ya envié un PR.
pub.dartlang.org/packages/fluttertoast
complemento. Este es mucho más limpio [conciso] y más fácil de personalizar.
Hay tres formas de mostrar tostadas en la aplicación flutter.
Te contaré sobre las tres formas que conozco y elegiré cuál quieres usar. Yo recomendaría el segundo.
1: uso de paquete externo.
Este es el primer método que es la forma más fácil de mostrar tostadas en la aplicación Flutter.
En primer lugar, debe agregar este paquete en pubspec.yaml
flutter_just_toast:^version_here
luego importe el paquete en el archivo donde desea mostrar tostadas.
'package:flutter_just_toast/flutter_just_toast.dart';
y el último paso muestra el brindis.
Toast.show( message: "Your toast message",
duration: Delay.SHORT,
textColor: Colors.black);
2: usando la forma oficial.
Este método también es simple pero tienes que lidiar con él. No digo que sea difícil, es simple y limpio. Recomendaría este método.
para este método, todo lo que tiene que hacer para mostrar tostadas es usar el siguiente código.
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Sending Message"),
));
pero recuerda que tienes que usar el contexto del andamio.
3: uso de la API nativa.
ahora este método ya no tiene sentido cuando ya tiene los dos métodos anteriores. Con este método, tiene que escribir código nativo para Android e iOS y luego convertirlo a un complemento y ya está listo. este método consumirá tu tiempo y tendrás que reinventar la rueda. que ya ha sido inventado.
Para aquellos que buscan Toast
lo que puede sobrevivir, la ruta cambia laSnackBar
puede que no sea la mejor opción.
Echa un vistazo a su Overlay
lugar.
Agregue flutter_just_toast a sus dependencias en Pubspecs.yaml
dependencias:
flutter_just_toast: ^1.0.1
Siguiente paquete de importación en su clase:
import 'package:flutter_just_toast/flutter_just_toast.dart';
Implementar tostadas con mensaje
Toast.show( message: "Your toast message",
duration: Delay.SHORT,
textColor: Colors.black);
simplemente use SnackBar (contenido: Texto ("hola"),) dentro de cualquier evento como onTap y onPress
Puede leer más sobre Snackbar aquí https://flutter.dev/docs/cookbook/design/snackbars
Para esto, hay diferentes versiones.
1) En primer lugar, puede usar SnackBar, que es un widget en Flutter.
2) Puede usar bibliotecas como toast, flutter_toast de pub.dev.
3) La tercera versión está creando su widget personalizado. Se puede crear usando el widget Overlay y la animación en Flutter.
Puedes hacer este tutorial para obtener más información al respecto. Aquí hay un enlace
Para tostadas de gráficos originales de Android puede usar esto: https://pub.dartlang.org/packages/fluttertoast
Funciona bien en Android e iOS. ingrese la descripción de la imagen aquí
https://pub.dev/packages/toast use esto para brindar esta biblioteca es bastante fácil de usar y funciona perfectamente para iOS y Android,
Sintaxis para show Toast:
Toast.show("Toast plugin app", duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
puedes usar este paquete: tostadas
toast: ^0.1.5
import 'package:toast/toast.dart';
Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
obtener paquete de tostadas de aleteo aquí
Agregue este paquete a las dependencias de su proyecto en pubspec.yaml
Luego, siempre que desee que se muestre el Toast con solo tocar un botón
Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
No hay widgets para tostadas en flutter, puedes ir a este complemento Usecase:
Fluttertoast.showToast(
msg: "My toast messge",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,);
Puede usar la biblioteca "fluttertoast". Para hacer esto, agréguelo en el archivo pubspec.yaml como:
dependencies:
fluttertoast: ^3.1.0
Luego importe esa biblioteca en el archivo de dardos que necesita la tostada y escriba su código. Por ejemplo, consulte el siguiente código:
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());
Importar cupertino_icons: ^0.1.2
y escribir debajo del código
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();
},
)
],
);
});
Para el mensaje de brindis en flutter, use la biblioteca bot_toast . Esta biblioteca proporciona funciones completas, soporte para mostrar notificaciones, texto, carga, archivos adjuntos, etc. Toast
Es bastante simple
Solo tenemos que instalar el paquete de tostadas de aleteo. Consulte la siguiente documentación: https://pub.dev/packages/fluttertoast
En la pestaña de instalación obtendrá la dependencia que debe pegar en pubspec.yaml y luego instalar.
Después de esto solo importa el paquete:
import 'paquete: fluttertoast / fluttertoast.dart';
Similar a la línea anterior.
Y luego, al usar la clase FlutterToast, puedes usar tu fluttertoast.
¡Ya terminaste!
Puedes usar algo como FlutterToast
Importar la lib
fluttertoast: ^2.1.4
Use como a continuación
Fluttertoast.showToast(
msg: "Hello world",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,
);
Eso es..