[Flutter] 15. Snack Bar 스낵바 실습 (Scaffold.Of 에러)

 

 

 

 

🙆‍♂️SnackBar 사용법

---

SnackBar는 메시지를 통해 작업에 대한 간단한 피드백을 제공하는 UI 입니다.

 

SnackBar를 사용하려면 Scaffold.of 함수를 사용해서 현재 위치(context)를 참조해서

showSnackBar라는 함수를 사용해서 SnackBar를 그릴 수 있습니다.

 

 

🚀Something.of(context)

---

현재 주어진 context에서 위로 올라가면서 가장 가까운 Something을 찾아서 반환하는 함수입니다.

Something에는 Scaffold가 들어갈 수도 있고 Theme가 들어갈 수도 있고 등등 다양하게 들어갈 수 있습니다.

 

 

그래서 간단한 버튼을 구현하여 클릭 시 스낵바가 나오도록 하는 기능을 삽입했습니다.

하지만 눌러보면 오류가 나옵니다.

 

 

Scaffold를 찾을 수 없는 것인데 그 이유는 이 게시물에서 설명했듯이 context가 지정하는 경로는 Sacffold가 아니라 MyPage를 지정하고 있기 땜누에 Sacffold.of contexrt를 인자값으로 넘기면 당연히 Sacffold를 찾을 수 없게 됩니다.

 

 

🚀Builder위젯을 사용

---

이처럼 Builder 위젯을 통해서 Sacffold의 context 값을 가져와서 context2라는 값에 저장을 한 후

Scaffold.of의 인자값으로 context2로 값을 넘겨주니 SnackBar가 잘 넘어오는 모습입니다.

 

 

🚀Builder위젯을 사용하지 않고

---

Builder 위젯을 사용하지 않고 BuildContext 문제를 해결하려면 새로 위젯을 정의해 주면 됩니다.

Scaffold 위젯의 body에 MySnackBar라는 클래스가 들어가도록 해주고

밑에 MySnackBar라는 클래스를 따로 정의하는 것입니다.

 

 

이런식으로 StatelessWidget 클래스를 선언해서 사용하면 Build 위젯 없이도 잘 되는 모습입니다.

원리는 당연히 MySnackBar 클래스의 context는 Scaffold의 경로가 담겨 있어서 가능합니다.

 

 

🙋‍♂️SnackBar 속성

---

SnackBar는 여러 속성을 갖고 있습니다. 이를 통해서 꾸며줄 수 있습니다.

 

🚀content

---

content 속성에 Text 위젯을 통해 SnackBar가 나올 때 출력하는 내용을 설정할 수 있습니다.

Text위젯의 textAlign 속성으로 가운데 정렬을 했고 style 속성을 통해서 글자색을 변경했습니다.

 

 

🚀backgruondColor

---

backgroundColor 속성으로 SnackBar의 배경색을 바꿀 수 있습니다.

 

 

 

🚀duration

---

duration속성을 이용하면 SnackBar의 노출 시간을 설정할 수 있습니다.