Introduction to the

The Scaffold of method is called in the Scallfold Build method. That is, the Scaffold Build method will throw an exception.

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

Usually to display a SnackBar you need to build a Builder, called through the Context of the Builder.

Scallfold.of(context).showSnackBar(SnackBar(contenxt: Text('This is a SnackBar'));
Copy the code

The official sample

SnackBar is displayed, and the official typical code looks like this:

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 Scaffold component build method calls 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(
            SnackBar(
              content: Text('Have a snack! '),),); },),); }}Copy the code

The wrong sample

However, calling Scallfold directly from the build method raises an exception:

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

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: () {
            ///Using Scallfold directly in the build method throws an exception
            Scaffold.of(context).showSnackBar(
              SnackBar(
                content: Text('Have a snack! '),),); }, ), ), appBar: AppBar(title: Text('Scaffold.of Example'))); }}Copy the code

Solution 1: Scaffold child components are built with Builder

The Scaffold either removed the code that displayed the SnackBar and displayed the SnackBar in the build method or packaged the Scaffold Builder in the build method body 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 a layer of Builder around the child component so that the context is not shared
      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'))); }}Copy the code

Solution 2: Use GlobalKey to store ScaffoldState

import 'package:flutter/material.dart';

class ScaffoldSnackBarDemo extends StatelessWidget {
  final _scallfoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///Use 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'))); }}Copy the code

Flutter learns from the Github code repository