Como criar Toast no Flutter?

166

Posso criar algo semelhante ao Toasts in Flutter? Apenas uma pequena janela de notificação que não está diretamente na cara do usuário e não bloqueia ou desbota a vista por trás dela?

aziza
fonte

Respostas:

204

Você pode acessar o pai ScaffoldStateusandoScaffold.of(context)

Então faça algo como

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

Snackbars são o "brinde" oficial do design do material. Consulte https://material.io/design/components/snackbars.html#usage

Aqui está um exemplo completo:

insira a descrição da imagem aqui

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
fonte
1
Como isso deve ser envolvido em um onPressed, por exemplo? porque eu tentei e nada aparece na tela.
aziza
Bem, eu nunca me encaixo no molde e sei que "oficial" não significa absoluto !! O Snackbar realmente é péssimo para o meu aplicativo UX, então eu permaneço bem claro e sempre implemento a notificação antiga de estilo pop-up flutuante. Eu sinto que é muito fácil para os usuários perderem as notificações do Snackbar (especialmente se eles não estiverem acostumados); mas não é fácil perder um pop-up flutuando no meio, na parte superior ou inferior da tela.
SilSur
@aziza wrap you button widget no Builder (), funcionará
Tabrizapps
A chamada do widget showSnackBar()deve ter um Scaffoldpai.
Lahiru Chandima
80

Use este plugin

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

insira a descrição da imagem aqui

Raouf Rahiche
fonte
2
Você deve primeiro adicionar a dependência do Fluttertoast no arquivo pubspec.yaml. O link para a dependência está aqui [link] ( pub.dartlang.org/packages/fluttertoast ). Em seguida, você pode usar o código acima
fritz-playmaker 15/18
Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast)
Robin
1
Agora ele funciona, eu preciso parar o aplicativo e executar 🏃‍♂️ sem depurar :)
Robin
Alguém enfrentou o problema de que a borda redonda está desativada depois de definir a cor bg github.com/PonnamKarthik/FlutterToast/issues/156
thanhbinh84
73

SnackBar é definitivamente a classe certa a ser usada, como apontado por Darky.

lanchonete

Uma coisa complicada showSnackBaré chegar ao ScaffoldState, se você está tentando chamar showSnackBardentro do método de construção onde você constrói o seu Scaffold.

Você pode ver um erro como este, que inclui algum texto explicando como resolver o 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)
════════════════════════════════════════════════════════════════════════════════════════════════════

Você pode passar um GlobalKeypara o seu Scaffoldconstrutor:

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

Ou você pode usar a Builderpara criar BuildContextum filho do Andaime.

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

Por fim, você pode dividir seu widget em várias classes, que é a melhor abordagem a longo prazo.

Collin Jackson
fonte
Tentei GlobalKey, Agora estou recebendo essa exceção: 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 10/10
1
Parece que você está usando a GlobalKeycomo argumento em que BuildContexté esperado. Não posso ajudá-lo a depurar isso ainda mais sem ver mais do seu código. Poste a linha de código que está lançando a exceção, provavelmente você não está usando os argumentos corretos.
Collin Jackson
2
Posso confirmar que usar a Builderopção que você deu funciona bem. Deparei com esse problema e resolvi isso para mim.
SeaFuzz 25/05
Eu recebi um erro com o método GlobalKey, mas a declaração final key = new GlobalKey<ScaffoldState>();fora da compilação do Widget o corrigiu.
Sagar V
Uma das melhores respostas no StackOverflow! Obrigado @CollinJackson
Masterfego 14/04
13

para mostrar a mensagem do brinde, você pode usar o plugin flutterToast para usar este plugin, você precisa

  1. Adicione esta dependência ao seu arquivo pubspec.yaml: - fluttertoast: ^3.1.0
  2. Para obter o pacote, você precisa executar este comando: - $ flutter packages get
  3. importe o pacote: - import 'package:fluttertoast/fluttertoast.dart';

use-o assim

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

Para mais informações, verifique isto

Virendra Varma
fonte
24
Em vez de responder a mesma resposta postada por outra pessoa, você poderia ter votado positivamente na resposta dele.
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
    );
fucukur
fonte
Tente adicionar uma ou duas frases descritivas que descrevam onde colocar qual código. Algo como "Adicionar pacote ao seu pubspec" e "No código, use:"
mlyko 29/11/19
6

Gostaria de fornecer uma solução alternativa para usar o flushbar do pacote. https://github.com/AndreHaueisen/flushbar
Como o pacote dizia: Use este pacote se precisar de mais personalização ao notificar seu usuário. Para desenvolvedores do Android, ele é feito para substituir brindes e lanchonetes.
Outra sugestão para usar o flushbar Como mostrar snackbar após navigator.pop (context) no Flutter?
Você também pode definir flushbarPosition como TOP ou BOTTOM
insira a descrição da imagem aqui

    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
fonte
5

Importar a lib

fluttertoast: 3.1.3

Use como abaixo

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

);

nimal viju
fonte
4

Caso o pacote Fluttertoast fornecido até agora não funcione ... Então, sugiro que tente brindar .
Não tem frescura nem cerimônia.

insira a descrição da imagem aqui

Isso simplesmente funciona.

Notei um bug no exemplo fornecido no seu Readme:

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

Enquanto o método requer um contexto. Então faça bem em adicionar 'contexto' assim:

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

Há uma chance de que isso tenha sido corrigido no momento em que você verificou, já enviei um PR.

Wale
fonte
Eu prefiro este plugin sobre o pub.dartlang.org/packages/fluttertoastplugin. Este é muito mais limpo [conciso] e mais fácil de personalizar.
SilSur 01/09/19
2

Existem três maneiras de mostrar torradas no App Flutter.
Vou falar sobre as três maneiras que eu conheço e escolher qual você deseja usar. Eu recomendaria o segundo.

1: uso de pacote externo.

este é o primeiro método que é a maneira mais fácil de mostrar torradas no aplicativo vibração.

Antes de tudo, você deve adicionar este pacote no pubspec.yaml

flutter_just_toast:^version_here

depois importe o pacote no arquivo em que deseja mostrar o brinde.

'package:flutter_just_toast/flutter_just_toast.dart';

e o último passo mostra a torrada.

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

2: usando maneira oficial.

esse método também é simples, mas você precisa lidar com isso. Eu não estou dizendo que é difícil, é simples e limpo, eu recomendaria este método.

para esse método, tudo o que você precisa fazer é mostrar o brinde usando o código abaixo.

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

mas lembre-se de que você deve usar o contexto do andaime.

3: usando API nativa.

agora esse método não faz mais sentido quando você já possui os dois métodos acima. Usando esse método, você deve escrever um código nativo para Android e iOS e, em seguida, convertê-lo em plug-in e pronto. esse método consumirá seu tempo e você precisará reinventar a roda. que já foi inventado.

Zakria Khan
fonte
1

Adicione flutter_just_toast às suas dependências no seu Pubspecs.yaml

dependências:

flutter_just_toast: ^1.0.1

Próximo pacote de importação para sua classe:

import 'package:flutter_just_toast/flutter_just_toast.dart';

Implementar o Toast com mensagem

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

Para isso, existem versões diferentes.

1) Primeiro de tudo, você pode usar o SnackBar, que é um widget no Flutter.

2) Você pode usar bibliotecas como toast, flutter_toast de pub.dev.

3) A terceira versão está criando seu widget personalizado. Ele pode ser criado usando o widget Overlay e Animation in Flutter.

Você pode este tutorial para aprender mais sobre isso. Aqui está um link

Kanan Yusubov
fonte
0

https://pub.dev/packages/toast use isso para brindar esta biblioteca é muito fácil de usar e funciona perfeitamente para ios e android,

Sintaxe do show Toast:

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

Passo 1:

dependências:

flutter_just_toast: ^1.0.1

Passo 2:

import 'package:flutter_just_toast/flutter_just_toast.dart';

Etapa 3:

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

Alan John
fonte
0

use esta dependência: toast: ^0.1.3 importe a dependência do brinde na página: import 'package:toast/toast.dart'; em seguida, em onTap () do widget: Toast.show("Toast plugin app", context,duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);

AMAL KG
fonte
0

você pode usar este pacote: brinde

adicione esta linha às suas dependências

toast: ^0.1.5

use-o assim:

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

obter pacote brinde vibração aqui

Adicione este pacote às dependências do seu projeto em pubspec.yaml

Então, sempre que você quiser que o Toast seja exibido como um toque de um botão

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

Não há nenhum widget para o brinde em vibração, Você pode ir a este plugin Usecase:

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

Você pode usar a biblioteca "fluttertoast". Para fazer isso, adicione-o no arquivo pubspec.yaml como:

dependencies:
  fluttertoast: ^3.1.0

Em seguida, importe essa biblioteca para o arquivo dardo em que você precisa do brinde e escreva seu código. Por exemplo, consulte o seguinte 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());
sathwik
fonte
0

Importe cupertino_icons: ^0.1.2 e escreva o código abaixo

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
fonte
0

Para a mensagem de brinde no flutter, use a biblioteca bot_toast . Esta biblioteca oferece suporte rico em recursos para exibição de notificações, texto, carregamento, anexos, etc.

insira a descrição da imagem aqui

Dhaval Kansara
fonte
0

É bem simples

Nós apenas temos que instalar o pacote de brinde de vibração. Consulte a seguinte documentação: https://pub.dev/packages/fluttertoast

Na guia de instalação, você obterá a dependência necessária para colá-la no pubspec.yaml e depois na instalação.

Depois disso, basta importar o pacote:

import 'pacote: fluttertoast / fluttertoast.dart';

Semelhante à linha acima.

E então, usando a classe FlutterToast, você pode usar o seu fluttertoast.

Você Terminou!!!

Prajwal Shinde
fonte
-1

É bastante fácil mostrar uma mensagem do Toast no Flutter.Scaffold.of(context).showSnackBar(SnackBar( content: Text("Toast Text Here"), ));

Qasim Ali
fonte
-2

Você pode usar algo como FlutterToast

Importar a lib

fluttertoast: ^2.1.4

Use como abaixo

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

É isso aí..

Android Dev
fonte