플러터(Flutter) - SnackBar 사용

플러터 2.0 부터는

Scaffold 대신 ScaffoldMessenger 를 사용해야 합니다.

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('내용 표시')));

 

 

처음 플러터에서 SnackBar를 사용해 보려 하면 뜻대로 안 될 때가 많을 것입니다.

 

SnackBar의 기본 구조는 아래와 같습니다.

Scaffold.of(context).showSnackBar(SnackBar(content:Text('내용표시')));

메시지 전달에서 간편하게 사용할 수 있지만 사용하려면 Scaffold 안에서 context 문제를 해결해 줘야 합니다.

 

첫 번째

새로운 context를 가져오면 됩니다.

child: Builder(
    builder:(context) => RaisedButton( 
        onPressed:(){
			Scaffold.of(context).hideCurrentSnackBar();
			Scaffold.of(context).showSnackBar(SnackBar(
				content:Text('메시지 내용')));
		}
)

위 코드에선 RaisedButton바로 위쪽에 Builder를 사용했지만 사용될 Class 의 Scaffold 바로 밑에 Builder를 넣어 주시면

Class 어디에서도 사용이 가능합니다.

Builder(

    builder:(context) => 사용될 위젯

 

두번째

GlobalKey 를 이용한 SnackBar 사용

GlobalKey<ScaffoldState>_key = GlobalKey<ScaffoldState>();

@override
 Widget build(BuildContext context) {
 	return Scaffold(
	key:_key,
    .
    .
    InkWell(
    onTap:(){
	SnackBarsnackBar = SnackBar(content:Text('메시지 내용'));
	_key.currentState.showSnackBar(snackBar);
},),

GlobalKey<ScaffoldState> _key 를 선언한 후 

Scaffold 의 key: 값에 넣어 주시고 

SnackBar 가 사용될 곳에서 _key.currentState.showSnackBar 로 불러오시면 됩니다.

 

하지만 위에 설명된 방법보다 더 강력하고 쉬운 방법이 있습니다.

GetX

https://pub.dev/packages/get

get | Flutter Package

GetX를 사용하시면 context나 잡다한 코드 필요 없이 간단하게 사용하실 수 있습니다.

pubspec.yaml 에 getX를 설치해 주시고

메인이 되는 dart의 MaterialApp을 GetMaterialApp로변경해 주시면 됩니다.

사용하실 땐 

Get.snackbar('타이틀', '내용');   <- 이렇게 하시면 끝!!!

물론 옵션도 다양하게 있으니 위에 링크된 페이지에서 찾아보시면 될 듯합니다.

GetX는 provider와 같은 상태 관리 및 기본 기능들을 더 간편하게 사용할 수 있게 도와주는 아주 강력한 녀석이니

Flutter를 사용하신다면 꼭 사용해 보시기 바랍니다.