¿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?

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:

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

Usa este plugin

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

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

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.

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

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.

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 Toastlo que puede sobrevivir, la ruta cambia laSnackBar puede que no sea la mejor opción.

Echa un vistazo a su Overlaylugar.

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

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

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

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

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

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!

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

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