[Flutter 앱 개발 / 2일차] 대학생의 앱 개발로 돈 벌기 프로젝트

오늘은 플러터의 "Stateful Widget"에 대해 공부했다.
지금까지는 State의 변화가 없는 Stateless Widget에 대해 공부했었는데,
실제 앱 상에서는 데이터의 추가나 변경 등이 당연히 있을 수밖에 없기 때문에
앱을 만들려면 Stateful Widget은 반드시 필요하다.

코딩셰프님의 강의 중, 간단한 로그인 기능과 주사위 게임을 만들어보는 <조금 매운맛 강좌 4>를 보다가
BuildContext 부분이 잘 기억이 나지 않아, <순한 맛 강좌 17>을 다시 복습했다.

<순한 맛 강좌 17>은 BuildContext에 대한 강좌였는데, 요약해보면 이렇다.

---

우리는 종종 아래와 같은 에러를 만나게 된다.

"Scaffold.of() called with a context that does not contain a scaffold"

Scaffold.of() 함수는 해당 함수가 불려진 곳(인자로 받은 context)으로부터 부모 위젯으로 점점 거슬러 올라가면서,
거슬러 올라가다가 Scaffold 위젯을 만나면 그걸 반환하는 함수이다.

그런데 위 에러가 보통 어떤 경우에 뜨냐면, 아래와 같이 코드를 짰을 때다.

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    ...
    Scaffold.of(context).showSnackBar(
    	SnackBar(
        	content: Text('에러가 뜨는 원인은?'),
        )
    )
    ...

이렇게 짜다가 코드를 실행하면 방금 전 우리가 보았던 에러가 뜨게 된다.

왜 뜰까?

내가 알아들은 내용이 맞다면,
3번째 줄의 build함수의 인자로 들어가는 context는 MyPage class의 context이다.
build를 통해 return 되는 Scaffold는 MyPage의 자식이 되고, 결국 인자로 전달되는 context는 Scaffold의 부모의 context라는 말이 된다.

그래서 위처럼 Scaffold.of(context).showSnackBar 이렇게 코드를 짜게 되면,
Scaffold의 부모 위치에서 시작해서 거슬러 올라가기 때문에,
우리가 원하는 자식의 위치를 얻어낼 수가 없다.

그러면 해결 방법은 무엇일까?

Widget build(BuildContext context) {
	return ...

Scaffold "내부"에서 build함수를 사용해서 자식뻘 되는 무언가를 return 하면서, 이때 인자로 전달되는 context를 이용하면
그 context는 부모인 Scaffold의 정보를 담고 있을 것이기 때문에 해.결.완.료 가 되는 것이다.

---

사실 이번 프로젝트를 다루는 게시글에서는 지식 전달은 최소화로 하고
나의 일지를 위주로 작성하리라 마음먹었었지만,
이 부분을 기록해놓으면 나에게도 많은 도움이 될 것 같아서 쓰게 되었다.
내일은 나머지 순한 맛 강좌 18~22번 정도까지 다시 들으면서 BuildContext와 Navigator 부분을 복습해 봐야겠다.


1일차 링크는 아래에 올려두겠다.

---

[1일차] 대학생의 앱 개발로 돈 벌기 프로젝트