Flutter 如何在颤振中显示SnackBar

我想在单击底部选项卡时显示SnackBar小部件。我试图将其表现为：

Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("Live Clicked"),
              ));

但是，应用程序会引发以下异常：

I/flutter ( 4965): The following assertion was thrown while handling a gesture:
I/flutter ( 4965): Scaffold.of() called with a context that does not contain a Scaffold.
I/flutter ( 4965): No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of(). This
I/flutter ( 4965): usually happens when the context provided is from the same StatefulWidget as that whose build
I/flutter ( 4965): function actually creates the Scaffold widget being sought.
I/flutter ( 4965): There are several ways to avoid this problem. The simplest is to use a Builder to get a context that
I/flutter ( 4965): is "under" the Scaffold. For an example of this, please see the documentation for Scaffold.of():
I/flutter ( 4965):   https://docs.flutter.io/flutter/material/Scaffold/of.html
I/flutter ( 4965): A more efficient solution is to split your build function into several widgets. This introduces a
I/flutter ( 4965): new context from which you can obtain the Scaffold. In this solution, you would have an outer widget
I/flutter ( 4965): that creates the Scaffold populated by instances of your new inner widgets, and then in these inner
I/flutter ( 4965): widgets you would use Scaffold.of().
I/flutter ( 4965): A less elegant but more expedient solution is assign a GlobalKey to the Scaffold, then use the
I/flutter ( 4965): key.currentState property to obtain the ScaffoldState rather than using the Scaffold.of() function.
I/flutter ( 4965): The context used was:
I/flutter ( 4965):   MyHomePage(state: _MyHomePageState(603645610))

尽管例外是不言自明的。我不明白为什么会发生这种情况，因为MyHomePage小部件中有

Scaffold

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App Name',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'App Name'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var bottomBarLabels = [
    new DestinationLabel(
        icon: new Icon(Icons.live_tv), title: new Text("Live")),
    new DestinationLabel(
        icon: new Icon(Icons.date_range), title: new Text("Matches")),
  ];

  @override
  Widget build(BuildContext context) {
    void _handleBottomNavigationBarTap(int newValue) {
      switch (newValue) {
        case 0:
          print("Live Clicked");
          Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("Live Clicked"),
              ));
          break;
        case 1:
          print("Matches Clicked");
          break;
      }
    }

    return new Scaffold(
      key: new Key("homepage"),
      appBar: new AppBar(
        title: new Text(config.title),
      ),
      bottomNavigationBar: new BottomNavigationBar(
          labels: bottomBarLabels, onTap: _handleBottomNavigationBarTap),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（新的MyApp（））；
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“应用程序名称”，
主题：新主题数据(
主样本：颜色。蓝色，
),
主页：新MyHomePage（标题：“应用程序名称”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>new_MyHomePageState（）；
}
类_MyHomePageState扩展状态{
变量bottomBarLabels=[
新目的标签(
图标：新图标（Icons.live_tv），标题：新文本（“live”），
新目的标签(
图标：新图标（图标。日期范围），标题：新文本（“匹配”），
];
@凌驾
小部件构建（构建上下文）{
void_车把底部导航栏（int newValue）{
开关（新值）{
案例0：
打印（“现场点击”）；
Scaffold.of（上下文）.showSnackBar（新的SnackBar(
内容：新文本（“现场点击”），
));
打破
案例1：
打印（“点击匹配项”）；
打破
}
}
归还新脚手架(
密钥：新密钥（“主页”），
appBar：新的appBar(
标题：新文本（config.title），
),
bottomNavigationBar：新的bottomNavigationBar(
标签：底部条形标签，onTap:_车把底部导航BARTAP），
);
}
}

您确实有一个脚手架，但不在MyHomePage的上下文之上。 您的Scaffold是MyHomePage的子级，而do

Scaffold.of（context）

正在尝试访问最近的父级Scaffold。 既然你没有，它就崩溃了

---

您可能应该将底部导航栏包装到一个新类中。并使用该小部件的上下文执行

Scaffold.of（context）

不幸的是，我目前无法升级我的颤振版本，但是，据我所知，只有当按下Live

图标时，您才试图显示
SnackBar

因此，您可能希望将Live
图标
制作成一个
图标按钮
，并单独使用其
onPressed
属性，而不是使用
底部导航栏
的
onTap
属性，然后将
图标按钮
包装在
生成器
中，类似于以下内容：

new BottomNavigationBar(
          labels: [
            new DestinationLabel(title: new Text("Live"),
              icon: new Builder(builder: (BuildContext context) {
                return new IconButton(icon: new Icon(Icons.live_tv),
                    onPressed: () {
                      Scaffold.of(context).showSnackBar(
                          new SnackBar(content: new Text("Live Clicked")));
                    });
              }),
            ),
            new DestinationLabel(icon: new Icon(Icons.date_range),
                title: new Text("Matches"),)


          ],
        )

我不确定这是否是最佳实践，我们的Flutter专家总是建议从多个类组成更复杂的小部件
 更改您的
\u handleBottomNavigationBarTap
方法以获取
BuildContext
参数

void _handleBottomNavigationBarTap(int newValue, BuildContext context) {
  ...
}

然后将
bottomNavigationBar
参数更改如下：

bottomNavigationBar: new Builder(
  builder: (BuildContext context) {
    return new BottomNavigationBar(
      labels: bottomBarLabels,
      onTap: (index) => _handleBottomNavigationBarTap(index, context),
    );
  }
),

这可以确保您调用
Scaffold.of（context）
将能够找到
ScaffoldState
，它是
上下文的祖先已弃用，不应使用。使用ScaffoldMessenger.showSnackBar。此功能在v1.23.0-14.0.pre.之后被弃用

这样使用：-

 ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('User Successfully Logged In...'),
    ));

它不起作用。我收到错误：
参数类型“Builder”无法分配给参数类型“Icon”