[flutter] 스낵바(SnackBar) 구버전, 신버전

플러터 스낵바가 업그레이드되었습니다. 구버전의 스낵바는 스낵바가 생성된 후 다른 페이지로 넘어가면 스낵바도 같이 없어지는 문제가 있었지만 이번 신버전 스낵바는 페이지 이동과 관계없이 설정한 시간만큼 스낵바를 보여주게 됩니다.

 

​

 

▣ 구버전 스낵바(SnackBar)

구버전 스낵바의 경우 Scaffold.of를 사용합니다. Scaffold.of 는 나의 부모 context를 가리킵니다. Builder이 없다면 부모의 Scaffold context가 없기 때문에 에러를 발생합니다. 그래서 Builder(context)를 사용해서 현재 페이지의 Scaffold의 constext를 가리켜 에러를 없앨 수 있습니다.

 

아래 구조도를 통해 보면 좌측 이미지는 Scaffold.of를 이용하면 부모의 Scaffold의 context를 찾지만 없기 때문에 에러가 발생합니다. 하지만 우측 이미지는 Scaffold는 Builder의 context로 인해 나 자신의 Scaffold를 가리킬 수 있습니다. 

 

스낵바구조

 

Builder(builder: (context) {
  return TextButton(
      onPressed: () {
        Scaffold.of(context).showSnackBar(SnackBar(
          content: Text('snackbar test'),
          duration: Duration(seconds: 5),
        ));
      },
      child: Text(
        '스낵바',
        style: TextStyle(color: Colors.white),
      ),
      style: TextButton.styleFrom(backgroundColor: Colors.blue));
})

 

 

▣ 신버전 스낵바(SnackBar)

최근 버전에서는 ScaffoldMessenger.of를 이용해 스낵바를 생성할 수 있습니다. 사용하기도 쉬우며 다른 페이지로 넘어가더라도 스낵바를 유지합니다.

ScaffoldMessenger는 MaterialApp안에 위치하고 있어 어느 페이지를 이동하더라도 계속해서 해당 페이지의 부모로 존재하고 이를 통해 페이지를 이동하더라도 스낵바를 유지하게 됩니다.

TextButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('dddd'),
        duration: Duration(seconds: 5),
      ),
    );
  },
  child: Text(
    '스낵바테스트',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  style: TextButton.styleFrom(
      backgroundColor: Colors.red
  ),
),

 

▣ 신버전 스낵바(SnackBar)를 이용해 페이지 이동시 스낵바 없애기

최근 버전에서는 ScaffoldMessenger.of를 이용해 스낵바를 생성하면 페이지 이동을 해도 스낵바가 사라지지 않습니다. 페이지 이동시 스낵바를 숨기고 싶다면 ScaffoldMessenger.of를 통해 MaterialApp에 위치한 ScaffoldMessenger의 context에 접근하지 못하게 해야 합니다. 그렇게 하기 위해 해당 페이지의 Scaffold를 ScaffoldMessenger로 감싸주고 body부분을 Builder로 감싸주어 ScaffoldMessenger.of를 호출하면 해당 페이지의 ScaffoldMessenger context에 접근하도록 해야 합니다.

 

스낵바를숨기는방법구조도

 

ScaffoldMessenger.of가MyApp내의ScaffoldMessenger의context를가리키는코드이미지

 

class MyNavi extends StatelessWidget {
  const MyNavi({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
        appBar: AppBar(
          title: Text('첫번째페이지'),
          centerTitle: true,
        ),
        body: Builder(
          builder: (context) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    child: Text('두번째페이지로 이동'),
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                        content: Text('hihi'),
                        duration: Duration(seconds: 5),
                        action: SnackBarAction(label: 'btn',onPressed: (){
                          Navigator.pushNamed(context, '/third');
                        },),
                      ));
                    },
                  ),
                  TextButton(
                    child: Text('세번째페이지로 이동'),
                    onPressed: () {
                      Navigator.pushNamed(context, '/third');
                    },
                  ),
                ],
              ),
            );
          }
        ),
      ),
    );
  }
}

 

​