如何在顫振中創建吐司？

Question

我可以在Flutter中創建類似Toasts的東西嗎？只是一個很小的通知窗口，不直接面對用戶，並且不鎖定或淡化背後的視圖？

Answer 1

您可以訪問使用Scaffold.of(context)

然後像做

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

小吃吧和烤麪包是一樣的，根據material.io

https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs

父ScaffoldState編輯：

一個完整的例子（我喜歡我如何在5分鐘內做到這一點。愛你撲）

runApp(new MaterialApp(
    home: new Scaffold(
    appBar: new AppBar(
     title: new Text("Snack bar"), 
    ), 
    body: new ListView.builder(
     itemCount: 42, 
     itemBuilder: (context, index) { 
     return new Card(
      child: new Column(
      children: <Widget>[ 
       new Image.network("https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg"), 
       new ListTile(
       title: new Text("Wow"), 
       subtitle: new Text("That's a cool unicorn out there"), 
       trailing: new IconButton(
        icon: const Icon(Icons.star), 
        onPressed:() { 
        Scaffold.of(context).showSnackBar(
          new SnackBar(
          content: new Text("Added to favorite"), 
          action: new SnackBarAction(
           label: "UNDO", 
           onPressed:() => Scaffold.of(context).hideCurrentSnackBar(), 
          ), 
         ), 
         ); 
        }, 
       ), 
      ) 
      ], 
     ), 
     ); 
     }, 
    ), 
), 
)); 

Answer 2

SnackBar肯定是使用合適的班級，由黑人指出。

一個棘手的事情有關showSnackBar越來越向ScaffoldState，如果你試圖到您建造Scaffold構建方法中調用showSnackBar。

您可能會看到像這樣的錯誤，其中包含一些解釋如何解決問題的文本。

══╡ 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) 
════════════════════════════════════════════════════════════════════════════════════════════════════ 

您可以通過一個GlobalKey您Scaffold構造：

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

或者你可以使用一個Builder創建BuildContext那是腳手架的孩子。

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

最後，你可以將你的小部件分成多個類，這是最好的長期方法。