[플러터] Toast 메시지 (Snack bar) 생성하기

Snack bar

자바에서는 toast(토스트) 메시지가 존재한다.

 

짧은 메시지가 출력된다.

 

하지만 플러터에는 toast 메시지가 기본으로 제공되지 않는다.

대신 snack bar(스낵바)라는 것을 기본으로 제공해주고 있다.

자바의 그것과 흡사하지만 조금은 다른 형태이다.

 

 

화면의 최하단 부분에 표시되며, toast보다 시간이나 세부적인 사항들을 유연하게 조절할 수 있게 제공해주고 있다.

물론, toast의 형태를 원한다면 패키지를 사용해 어렵지 않게 구현할 수 있을 것이다.

 

사용

플러터의 snack bar를 사용하는 방법은 매우 간단하다.

ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
content: Text('hi'),
));

content 속성내의 위젯을 snack bar에 출력해준다.

이전에는 snack bar의 사용이 꽤 귀찮았었는데, 플러터가 업데이트되면서 ScafflodMessenger로 간단하게 구현할 수 있게 되었다.

 

 

추가

추가적으로 snack bar는 state클래스에서 build가 완료된 이후 호출되어야한다.

따라서, 스크린이 생성됨과 동시에 snack bar를 호출하고싶다면 initState()에서 아래를 함수로 snack bar를 생성하는 함수를 호출 해야한다.

WidgetsBinding.instance
.addPostFrameCallback((_) => showSnackBar(text));

void showSnackBar(String text){
	ScaffoldMessenger.of(context).showSnackBar(SnackBar(
	content: Text(text),
	));
}

 

만약 Navigator를 통한 화면 전환 이후에 출력되어야한다면 Navigator를 호출하는 곳에서 snack bar를 함께 출력해주면 화면이 전환된 이후에 snack bar가 곧바로 출력된다. 이런 경우에는 굳이 위와 같이 initState를 사용할 필요가 없다.

     Navigator.pop(context);
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('Day $dayIndex CLEAR!!'),
        ));