Flutter 如何正确显示SnackBar

简介

官方API文档Scaffold的of方法说明有说明调用Scaffold.of方法是在Scallfold的子组件的Build方法中，也就是不能直接在构建Scaffold的build方法里调用，否则会抛异常。

Typical usage of the Scaffold.of function is to call it from within the build method of a child of a Scaffold.

通常为显示一个SnackBar需要构建一个Builder，通过Builder的context调用（原因是）

Scallfold.of(context).showSnackBar(SnackBar(contenxt: Text('这是一个SnackBar'));

官方示例

显示SnackBar，官方典型示例代码如下所示：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Code Sample for Scaffold.of.',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: Scaffold(
       body: MyScaffoldBody(),
       appBar: AppBar(title: Text('Scaffold.of Example')),
     ),
     color: Colors.white,
   );
 }
}
// 在Scaffold子组件里的build方法可以调用Scaffold.of方法
class MyScaffoldBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Center(
     child: RaisedButton(
       child: Text('SHOW A SNACKBAR'),
       onPressed: () {
         Scaffold.of(context).showSnackBar(
           SnackBar(
             content: Text('Have a snack!'),
           ),
         );
       },
     ),
   );
 }
}

错误示例

但是若直接在构建Scallfold的build方法中调用会报异常:

Scaffold.of() called with a context that does not contain a Scaffold.

错误代码如下所示：

import 'package:flutter/material.dart';
class ScaffoldSnackBarDemo extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: RaisedButton(
         child: Text('SHOW A SNACKBAR'),
         onPressed: () {
           ///直接在Scallfold的build方法里使用会抛异常
           Scaffold.of(context).showSnackBar(
             SnackBar(
               content: Text('Have a snack!'),
             ),
           );
         },
       ),
     ),
     appBar: AppBar(title: Text('Scaffold.of Example')),
   );
 }
}

解决方法一：Scaffold的子组件通过Builder构建

这时候要不就是按官方的，将需要显示SnackBar的代码另外抽离一个自定义子组件，在子组件的build方法再显示SnackBar，要不就是在Scaffold的build方法体对该子组件再包一层Builder，如下所示。

import 'package:flutter/material.dart';
class ScaffoldSnackBarDemo extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return Scaffold(
      ///在子组件外再包一层builder，让context不共用
     body: Builder(builder: (context) {
       return Center(
         child: RaisedButton(
           child: Text('SHOW A SNACKBAR'),
           onPressed: () {
             Scaffold.of(context).showSnackBar(
               SnackBar(
                 content: Text('Have a snack!'),
               ),
             );
           },
         ),
       );
     }),
     appBar: AppBar(title: Text('Scaffold.of Example')),
   );
 }
}

解决方法二：使用GlobalKey存储ScaffoldState

import 'package:flutter/material.dart';
class ScaffoldSnackBarDemo extends StatelessWidget {
 final _scallfoldKey = GlobalKey<ScaffoldState>();
@override
 Widget build(BuildContext context) {
   return Scaffold(
     ///使用GlobalKey解决
     key: _scallfoldKey,
     body: Center(
       child: RaisedButton(
         child: Text('SHOW A SNACKBAR'),
         onPressed: () {
           _scallfoldKey.currentState.showSnackBar(SnackBar(
             content: Text('Have a snack!'),
           ));
         },
       ),
     ),
     appBar: AppBar(title: Text('Scaffold.of Example')),
   );
 }
}

Flutter学习Github代码仓库

https://github.com/AiguangLi/Flutter

来源：https://juejin.cn/post/6961011342450884639