Flutter 기본-3. SnackBar, BuildContext, Toast

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

---

 

1. SnackBar

SnackBar는 아래 화면과 같이 클릭하면 화면 하단에 정보가 팝업되도록 표시해주는 기능이다.

 

 

SnackBar는 아래 그림의 코드와 같이 작성하면된다. Scaffold의 body 내부에 TextButton을 만들고 onPressed 속성에 SnackBar를 추가해주는 형태이다.

ScaffoldMessenger.of를 사용하여 context를 전달한다. 그럼 SnackBar 인스턴스는 어떤 Scaffold 위에 SnackBar를 그려야하는지 context 정보를 참고하여 SnackBar를 렌더링한다. 원래 2022년 ScaffoldMessenger가 나오기전에는 따로 Builder 객체를 만들어서 context를 한 번 더 안쪽에서 전달해줬다. 자세한 내용을 다음 장에서 살펴본다.

 

 

 

 

2. BuildContext : context 및 .of(context) 이해하기

 

BuildContext는 해당 위젯의 위젯 트리에서의 위치나 상황 정보를 전달해준다. 여태껏 Scaffold를 작성할 때면 아래와 같이 위젯의 build 메서드에 BuildContext를 파라미터로 받도록 했었다.

 

이렇게하면 build 메서드 이하 위젯들에 해당 context가 전달된다.

 

 

Scaffold.of

다시 SnackBar로 돌아와서, SnackBar를 사용하기 위해 참고한 context 정보를 살펴본다. Something.of(context)는 context를 인자로 갖는 특정 위젯의 부모 위젯에서부터 Something 타입의 위젯을 찾아서 최초로 만나는 위젯의 정보를 context로 갖게한다. 현재 MyPage -> Scaffold -> SnackBar 구조에서는 아래 도식과 같은 형태이다.

 

 

 

위와 같은 위젯 트리 구조에서는 context 위에 Scaffold 위젯이 없는 상황이므로 원래는 에러가 발생한다! 그래서 사실 아래 2가지 방식으로 context를 바꿔준다.

 

영어 뜻으로 생각해봐도, Scaffold of context 이므로 context 내에서의 Scaffold를 찾는다는 뜻이 될 것이다. 그리고 그 Scaffold에서 showSnackBar를 호출하므로 특정 context를 갖는 Scaffold라는 위젯 트리 구조에 SnackBar를 추가한다는 뜻으로 이해하면 될 것 같다.

 

 

 

1. Builder 위젯으로 새로운 context 전달

Builder 위젯을 TextButton 위젯의 상위에 추가해주면 된다. 이러면 아래 Scaffold의 context Builder의 context를 참조한다. 그럼 context 상위 부모 위젯부터 탐색하다보면 Scaffold 위젯을 만난다. 여기서는 context를 갖는 부모가 최상위에 있는 build 메서드이다. 그 아래 Scaffold를 만나기 때문에 SnackBar가 해당 Scaffold 위에 그려질 수 있는 것이다.

 

 

2. 새로운 위젯을 선언하여 context 생성

body 부분에 직접 TextButton을 넣는대신, 새로운 context를 갖는 위젯 자체를 넣는 방식이다. newWidget 이라는 이름으로 StatelessWidget 클래스를 선언하고(stl 단축어로 바로 생성) 여기에 TextButton 위젯을 넣어 리턴하면 된다.

 

 

 

ScaffoldMessenger

처음 적용한 방식대로 ScaffoldMessenger를 적용하면 이렇게 context를 일일이 신경쓰지 않아도 알아서 Scaffold.of에 대한 context처리를 해준다. 다만 context가 전달되는 방식에 대해 이해하기 위해 이전에 사용했던 아래 방식들을 학습했다. 이미 flutter에서는 Scaffold.of(context).showSnackBar는 deprecated 되었다.

 

 

 

 

3. Toast

아래 영상처럼 Toast 형태로 팝업을 구성할 수도 있다. 

fluttertoast 라이브러리 추가

fluttertoast 라이브러리를 이용할 것인데, flutter 내장 라이브러리가 아니므로 따로 dependency를 추가해줘야한다. pubspec.yaml에 들어가서 fluttertoast: {version}을 추가한다. 22년 12월 기준으로는 8.0.9 버전으로 잘 동작한다.

 

pub get으로 업데이트 후, 프로젝트 최상단에 import 해준다. 정상적으로 dependency가 get 되었다면 자동완성 목록에 추가된다.

 

Toast 추가

SnackBar와 동일하게 Button 하위의 onPressed의 함수로 Fluttertoast를 추가하면 된다. 상세한 속성들은 실제 필요할 때 찾아보면서 적용하면 될 것이다.