Flutter 는 SnackBar 를 어떻게 정확하게 표시 합 니까?

간단 한 소개
공식 API 문서Scaffold 의 방법 설명Scaffold.of 를 호출 하 는 방법 은 Scalfold 의 하위 구성 요소 인 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!'),
            ),
          );
        },
      ),
    );
  }
}

오류 예시
그러나 Scalfold 를 구축 하 는 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')),
    );
  }
}

해결 방법 1: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')),
    );
  }
}

해결 방법 2: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
이상 은 Flutter 가 SnackBar 의 상세 한 내용 을 어떻게 정확하게 표시 하 는 지 입 니 다.Flutter 가 SnackBar 를 정확하게 표시 하 는 지 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!