¿Cómo crear Toast in Flutter?


167

¿Puedo crear algo similar a Tostadas en Flutter? ¿Solo una pequeña ventana de notificación que no está directamente en la cara del usuario y no bloquea o desvanece la vista detrás de él?

Respuestas:


205

Puede acceder al padre ScaffoldStateusandoScaffold.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:

ingrese la descripción de la imagen aquí

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

1
¿Cómo se debe envolver esto dentro de un onPressed, por ejemplo? porque lo he probado y no aparece nada en la pantalla.
aziza

¡Bueno, nunca encajo en el molde y sé que "oficial" no significa absoluto! El Snackbar realmente apesta para mi UX de aplicación, así que me mantengo alejado de él y siempre implemento la notificación de estilo emergente flotante anterior. Creo que es muy fácil para los usuarios perderse las notificaciones de Snackbar (especialmente si no están acostumbrados); pero no es fácil perderse una ventana emergente que flota en el medio, la parte superior o inferior de la pantalla.
SilSur

@aziza ajusta tu widget de botón en Builder (), funcionará
Tabrizapps

La llamada del widget showSnackBar()debe tener un Scaffoldpadre.
Lahiru Chandima

80

Usa este plugin

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

ingrese la descripción de la imagen aquí


2
Primero debe agregar la dependencia Fluttertoast en el archivo pubspec.yaml. El enlace a la dependencia está aquí [link] ( pub.dartlang.org/packages/fluttertoast ). Entonces puede usar el código anterior
fritz-playmaker

Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast)
Robin

1
Ahora funciona, necesito detener la aplicación y ejecutar 🏃‍♂️ sin depurar :)
Robin

Cualquiera se enfrentó al problema de que el borde redondo está deshabilitado después de configurar bg color github.com/PonnamKarthik/FlutterToast/issues/156
thanhbinh84

73

SnackBar definitivamente es la clase correcta para usar, como lo señaló Darky.

snackbar

Una cosa difícil showSnackBares llegar al ScaffoldState, si está intentando llamar showSnackBardentro 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 GlobalKeya tu Scaffoldconstructor:

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 Builderpara crear BuildContextun 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.


Intenté GlobalKey, ahora recibo esta excepción: 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
Parece que está utilizando a GlobalKeycomo argumento donde BuildContextse 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.
Collin Jackson

2
Puedo confirmar que usar la Builderopción que diste funciona bien. Me encontré con este problema y esto lo resolvió por mí.
SeaFuzz

Obtuve un error con el método GlobalKey, pero al corregir la declaración final key = new GlobalKey<ScaffoldState>();fuera de Widget build.
Sagar V

¡Una de las mejores respuestas en StackOverflow! Gracias @CollinJackson
Masterfego

13

para mostrar el mensaje de brindis, puede usar el complemento flutterToast para usar este complemento, debe

  1. Agregue esta dependencia a su archivo pubspec.yaml: - fluttertoast: ^3.1.0
  2. Para obtener el paquete, debe ejecutar este comando: $ flutter packages get
  3. importar el paquete: - 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


24
En lugar de responder la misma respuesta publicada por otra persona, podría haber votado su respuesta.
CopsOnRoad

7

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

Intente agregar una o dos oraciones descriptivas que describan dónde colocar cada código. Algo así como "Agregar paquete a su pubspec" y "En código, use:"
mlyko

6

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
ingrese la descripción de la imagen aquí

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

5

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,

);


4

En caso de que el paquete Fluttertoast proporcionado hasta ahora no funcione ... Entonces te sugiero que pruebes tostadas .
No tiene lujos ni ceremonia.

ingrese la descripción de la imagen aquí

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.


Prefiero este complemento sobre el pub.dartlang.org/packages/fluttertoastcomplemento. Este es mucho más limpio [conciso] y más fácil de personalizar.
SilSur

2

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.



1

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


1

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



0

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

0

Paso 1:

dependencias:

flutter_just_toast: ^1.0.1

Paso 2:

import 'package:flutter_just_toast/flutter_just_toast.dart';

Paso 3:

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


0

use esta dependencia: toast: ^0.1.3 luego importe la dependencia de tostadas en la página: import 'package:toast/toast.dart'; luego en onTap () del widget: Toast.show("Toast plugin app", context,duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);


0

puedes usar este paquete: tostadas

agrega esta línea a tus dependencias

toast: ^0.1.5

luego úsalo así:

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

0

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

0

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

0

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());

0

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

0

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

ingrese la descripción de la imagen aquí


0

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!


-1

Es bastante fácil mostrar un mensaje de brindis en Flutter.Scaffold.of(context).showSnackBar(SnackBar( content: Text("Toast Text Here"), ));


-2

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..

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.