如何在Flutter中显示SnackBar？

Question

我想在我的 Flutter 应用中显示一个 SnackBar。我已经阅读了文档并复制了它：
我的脚手架主体：

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("Osztályok"),
          leading: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: IconButton(
                  icon: Icon(Icons.exit_to_app, color: Colors.white70),
                  onPressed: () {
                    authService.signOut();
                    authService.loggedIn = false;
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => GoogleSignUp()));
                  })),
          actions: <Widget>[
            Padding(
                padding: const EdgeInsets.only(right: 5.0),
                child: Row(
                  children: <Widget>[
                    IconButton(
                        icon: Icon(Icons.add_circle_outline,
                            color: Colors.white70),
                        onPressed: () {
                          createPopup(context);
                        }),
//                    IconButton(
//                        icon: Icon(Icons.search, color: Colors.black38),
//                        onPressed: null),
                  ],
                )),
          ],
        ),

SnackBarPage class:

class SnackBarPage extends StatelessWidget {

  void jelszopress(TextEditingController jelszoController, BuildContext context) async{
    var jelszo;
    DocumentReference docRef =   
    Firestore.instance.collection('classrooms').document(globals.getid());
    await docRef.get().then((value) => jelszo= (value.data['Jelszo']) );
    if (jelszo == jelszoController.text.toString()){
      Navigator.push(context,
          MaterialPageRoute(builder: (context) => InClassRoom()));
    }
    else{
      Navigator.pop(context);


      final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

      Scaffold.of(context).showSnackBar(snackBar);
    }
  }
Future<String> jelszoba(BuildContext context) {
    TextEditingController jelszoController = TextEditingController();
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
              title: Text('Add meg a jelszót'),
              content: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  child: TextField(
                      controller: jelszoController,
                      decoration: InputDecoration(hintText: "Jelszó")
                  )
              ),
              actions: <Widget>[
                MaterialButton(
                  elevation: 5.0,
                  child: Text('Mehet'),
                  onPressed: () {
                    jelszopress(jelszoController, context);
                  },
                )]);
        }
    );
  }

  var nevek;
  var IDS;
  SnackBarPage(this.nevek, this.IDS);
  @override
  Widget build(BuildContext context){
    return ListView.builder(
      itemCount: nevek.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            onTap: () {
              globals.setid(IDS[index]);
              jelszoba(context);

            },
            title: Text(nevek[index]),
          ),
        );
      },
    ) ;

  }
}

但是我的科迪不显示 SnackBar。我尝试了这个问题的解决方案：但添加 Builder 小部件没有帮助。

Answer 1

因此根据错误，Snackbar.of() 中传递的上下文似乎不是正确的上下文。基于 1 & 这将是有意义的；和摘要复制如下：

Each widget has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget.build or State.build function. (And similarly, the parent of any children for RenderObjectWidgets.)

特别是，这意味着在构建方法中，构建方法的小部件的构建上下文与该构建方法返回的小部件的构建上下文不同。

所以这意味着您在 jelszoba(context) 函数中传递的构建上下文不是您需要的构建上下文，实际上是实例化脚手架的小部件的构建上下文。

那么如何修复： 要解决此问题，请将 Card 小部件包装在 Builder 小部件中的 SnackbarPage 中，并将其上下文传递给 jelszoba(context) 方法。

来自 1 I post 下面的示例：

@override
Widget build(BuildContext context) {
// here, Scaffold.of(context) returns null
return Scaffold(
  appBar: AppBar(title: Text('Demo')),
  body: Builder(
    builder: (BuildContext context) {
      return FlatButton(
        child: Text('BUTTON'),
        onPressed: () {
          // here, Scaffold.of(context) returns the locally created Scaffold
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Hello.')
          ));
        }
      );
    }
  )
);
}

Answer 2

这样就可以正常使用底部导航栏中的snack bar了。但是，如果你想在正文中显示，那么只需从Builder中复制代码并将其粘贴到脚手架的正文中即可。

      Scaffold(bottomNavigationBar: Builder(builder: (context) => Container(child: Row(children: <Widget>[
      Icon(Icons.add_alarm), Icon(Icons.map),    IconButton(icon: Icon(Icons.bookmark),
            onPressed:() {
        Scaffold.of(context).showSnackBar(mySnackBar);
            
              final mySnackBar =  SnackBar(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
              behavior: SnackBarBehavior.floating,
              backgroundColor: Colors.white, duration: Duration(seconds: 1),
              content: Text(
                'Article has been removed from bookmarks',
                
              ),);
        } 
),
    ],
),
),
),
);

注意：在SnackBar 的行为属性中，您可以将其留空。但问题是“如果你有弧形导航栏或底部导航栏上方有一个浮动操作按钮，则快餐栏将提升这些图标（或 FAB ）并影响 UI”。这就是为什么 SnackBar.floating 更受欢迎，因为它更适合 UI。不过你可以自己去看看哪个最适合你。

Answer 3

"Scaffold.of(context)" 已弃用，return 将为空。现在使用 "ScaffoldMessenger.of(context)". As per Flutter documentation.

  @override
  Widget build(BuildContext context) {
// here, Scaffold.of(context) returns null
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
              content: const Text('snack'),
              duration: const Duration(seconds: 1),
              action: SnackBarAction(
                label: 'ACTION',
                onPressed: () { },
              ),
            ));
          },
          child: const Text('SHOW SNACK'),
        ),
      ),
    );
  }

注意： 确保您的 main.dart 覆盖的 build() 函数应该 return "MaterialApp" 作为一个小部件，例如：

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
   // Must be MaterialApp widget for ScaffoldMessenger support.
  return MaterialApp(  
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyDashboard(),
    );
  }
}

如何在Flutter中显示SnackBar？

How to display SnackBar in Flutter?

widget

snackbar

flutter