[flutter] SnackBar

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
        //colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: false,
      ),
      home: const Mypage(),
    );
  }
}

class Mypage extends StatelessWidget {
  const Mypage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snack Bar'),
      ),
      body: HomeBody(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.thumb_up),
        onPressed: (){
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                  content: Text('Like a new Snack Bar!'),
                  duration: Duration(seconds: 5),
                  action: SnackBarAction(
                      label: 'Undo',
                      onPressed: (){
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder:(context) => Thirdpage()),
                        );
                      },
                  ),
              ),
          );
        },
      ),
    );
  }
}

class HomeBody extends StatelessWidget {
  const HomeBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
          child: Text('Go to the second page'),
        onPressed: (){
            Navigator.push(
                context, 
                MaterialPageRoute(builder:(context) => Secondpage()),
            );
        },
      ),
    );
  }
}

class Secondpage extends StatelessWidget {
  const Secondpage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(
            '"좋아요가 추가 되었습니다"',
            style: TextStyle(
              fontSize: 20.0,
              color: Colors.lightGreen,
            ),
        ),
      ),
    );
  }
}

class Thirdpage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '"좋아요"를 취소하시겠습니까?',
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.lightGreen,
              ),
            ),
            ElevatedButton(
                onPressed: (){
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                        content: Text('"좋아요"가 취소되었습니다'),
                        duration: Duration(seconds: 3),
                    ),
                  );
                },
                child: Text('취소하기'),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

 

 

일정부분의 페이지에서만 SnackBar가 보여지고 페이지 이동을 하게되면 SnackBar가 즉시 사라지게 하기위해선

MaterialApp이 제공하는 root ScaffoldMessenger를 사용하는것이 아니라 개별적인 ScaffoldMessenger를 생성해야한다.

 

ScaffoldMessenger.of(context)로는 ScaffoldMessenger를 찾을수 없음

ScaffoldMessenger는 MaterialApp이 제공하는 root ScaffoldMessenger가 아니기때문에 자손 Scaffold에 대한 정보를 가지고 있지않기 때문임.

 

그래서 Scaffold 아래에 Builder 위젯을 사용하여 새로운 Context를 생성한후  ScaffoldMessenger 메소드에 전달해야함

 

Center 위젯을 Builder 위젯으로 감싼다.

 

그리고 Builder 위젯은 반드시 위젯을 return해주어야 하므로 Center 위젯을 리턴해주면 된다.

 

Center위젯은 return된 위젯이므로 세미코론으로 마감한다.

 

context 뒤에서 중괄호를 열어주었으니 Center위젯 아래에서도 중괄호로 닫아준다.