How to display SnackBar correctly in Flutter in Android

Editor to share with you how to correctly display SnackBar in Flutter in Android. I hope you will get something after reading this article. Let's discuss it together.

Brief introduction

The of method of the official API document Scaffold states that the Scaffold.of method is called in the Build method of the child component of Scallfold, that is, it cannot be called directly in the build method of building Scaffold, otherwise an exception will be thrown.

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

You usually need to build a Builder to display a SnackBar, through the context call of the Builder (because)

Scallfold.of (context) .showSnackBar (SnackBar (contenxt: Text ('this is a SnackBar')); official example

SnackBar is displayed, and the official typical sample code is as follows:

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,) }} / / the build method in the scaffold subcomponent can call the Scaffold.of method class MyScaffoldBody extends StatelessWidget {@ override Widget build (BuildContext context) {return Center (child: RaisedButton (child: Text ('SHOW A SNACKBAR'), onPressed: () {Scaffold.of (context). ShowSnackBar (content: Text (' Have a snackbacks'),) ) },),);}} error example

However, if you call it directly in the build method of building Scallfold, you will report an exception:

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

The error code is as follows:

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:) {/ use Scaffold.of (context) .showSnackBar (content: Text (' Have a snackproof') directly in the build method of Scallfold. ),) },), appBar: AppBar (title: Text ('Scaffold.of Example')),);}} solution 1: subcomponents of Scaffold are built through Builder

At this time, either officially, the code that needs to display SnackBar is removed from a custom subcomponent, and the SnackBar is displayed again in the build method of the subcomponent, or another layer of Builder is wrapped in the body of the build method of Scaffold, as shown below.

Import 'package:flutter/material.dart';class ScaffoldSnackBarDemo extends StatelessWidget {/ / This widget is the root of your application. @ override Widget build (BuildContext context) {return Scaffold (/ wrap another layer of builder outside the subcomponents Let context not share body: Builder (builder: (context) {return Center (child: RaisedButton (child: Text ('SHOW A SNACKBAR'), onPressed: () {Scaffold.of (context). ShowSnackBar (SnackBar (content: Text (' Have a snackbacks'),)) },),);}), appBar: AppBar (title: Text ('Scaffold.of Example')),);}} solution 2: use GlobalKey to store ScaffoldStateimport' package:flutter/material.dart';class ScaffoldSnackBarDemo extends StatelessWidget {final _ scallfoldKey = GlobalKey () @ override Widget build (BuildContext context) {return Scaffold (/ use GlobalKey to solve key: _ scallfoldKey, body: Center (child: RaisedButton (child: Text ('SHOW A SNACKBAR'), onPressed: () {_ scallfoldKey.currentState.showSnackBar (SnackBar (content: Text (' Have a snackbacks'),)) },), appBar: AppBar (title: Text ('Scaffold.of Example')),)}} after reading this article, I believe you have a certain understanding of "how to correctly display SnackBar in Flutter in Android". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!