Flutter snack bar 사용법(최신판)

옛날에는 Snack bar를 사용하기 위해서는 ScaffoldMessenger의 특수성때문에, 중간에 builder를 넣고, ScaffoldMessenget내부에서 scaffold를 만드는등, 복잡한 짓을 해야 했다.

하지만 2.0업데이트 이후 이런 똥꼬쇼를 할 이유가 없어졌다.

 

지금 현재 ScaffoldMessenger는 훨씬 사용하기 편리해진 상태다. 

 

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) { //여기 있는 context 가져옴
    return Scaffold(
      appBar: AppBar(
        title: Text('snack bar'), 
      ),
    body: SizedBox( //버튼 크기 조절을 위해 삽입
      width: 100.0,
      height: 100.0,
      child: TextButton(
        child: Text('press this button'),
        style: TextButton.styleFrom(
          backgroundColor: Colors.yellow, //배경색
          primary: Colors.red, // foreground
        ),
        onPressed: (){ //버튼을 눌렀을때
          ScaffoldMessenger.of(context).showSnackBar( 
            //SnackBar 구현하는법 context는 위에 BuildContext에 있는 객체를 그대로 가져오면 됨. 
              SnackBar(
                content: Text('Like a new Snack bar!'), //snack bar의 내용. icon, button같은것도 가능하다.
                duration: Duration(seconds: 5), //올라와있는 시간
                action: SnackBarAction( //추가로 작업을 넣기. 버튼넣기라 생각하면 편하다.
                  label: 'Undo', //버튼이름
                  onPressed: (){}, //버튼 눌렀을때.
                ),
              )
          );
        }
      ),
    ),
    );
  }
}

주석에서 설명했다시피, 어떤 버튼의 onPressed를 눌렀을때 

17번째 줄부터 21번째 줄을 진행해주면 간단하며,

action부분은추가로 그 SnackBar에 button을 넣고 싶을때나 사용한다. 

 

캡처해둔 저 snackbar는 버튼 누른후 5초있으면 사라진다.

 

다만 이 방식은 Navigator를 통해 화면이 바뀌었을때도 적용이 된다는 것에 유의해야한다,