在Android中的Flutter要如何正确显示SnackBar

小编给大家分享一下在Android中的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')),     );   } }

看完了这篇文章，相信你对“在Android中的Flutter要如何正确显示SnackBar”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！