[Flutter]ScaffoldMessenger가 Scaffold의 Context 바로 접근 가능

Enabled 버튼을 클릭하면 스낵바(I am Scnack Bar) 가 뜨는 코드이다. 

 

빌드 컨텍스트(Build Context)를 이용하여 구현

코딩쉐프 - 플러터 순한맛를 참고하면 스낵바를 사용하기 위해 body 안에 builder를 둠으로써 구현했다. 강의에서는 FlatButton을 사용했지만 FlatButton은 없어졌고 TextButton 위젯을 대신 사용하였다.

다음 코드의 주된 내용은 스낵바를 상용하기 위해서 Body안에 builder를 두너 컨텍스따로 만들어주어야했다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Snack Bar',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SnackBar test"),
          centerTitle: true,
          elevation: 0.0,
        ),
        body: Builder(
          builder: (BuildContext ctx) { 
            return Center(
              child: TextButton(
                style: TextButton.styleFrom(
                  textStyle: const TextStyle(fontSize: 20),
                ),
                child: const Text('Enabled'),
                onPressed: () {
                  ScaffoldMessenger.of(ctx).showSnackBar(SnackBar(
                    content: Text('I am SnackBar'),
                  ));
                },
              ),
            );
        ));
  }
}

ScaffoldMessenger로 Scaffold 의 Context 접근하여 구현

그러나 최근 변경 사항을 보면 ScaffoldMessenger가 Scaffold의 Context를 바로 다룰 수 있도록 업그레이드 되어서 바디에서 빌더를 따로 두지 않아도 되도록 변경되었다. 따라서 아래의 코드도 동일하게 동작한다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Snack Bar',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SnackBar test"),
          centerTitle: true,
          elevation: 0.0,
        ),
        body: Center( // builder 필요 없게 됌
              child: TextButton(
                style: TextButton.styleFrom(
                  textStyle: const TextStyle(fontSize: 20),
                ),
                child: const Text('Enabled'),
                onPressed: () {
                  // ScaffoldMessenger에서 Scaffold의 Context 바로 접근 
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar( 
                    content: Text('I am SnackBar'),
                  ));
                },
              ),
            ),
        );
  }
}