Flutter _ Build Context

230524

 

 

---

오늘은 Build Context에 대해 알아보고

실습해보겠다.

 

 

우선 Stateful Widget에서

Text를 위젯으로 추출해주자.

 

코드 작업 표시에서

Extract Widget을 선택하면 된다.

 

Text 위젯을 MyLargeTitle로

추출하였다.

 

우리는 지금까지 Text 위젯을 만들때

하나하나 수작업으로

글씨 크기, 색상, 굵기를 한곳에서 수정하였다.

 

이러한 불편함 없이

Flutter가 준비한

앱의 모든 스타일을 한 곳에서 지정하는 기능인

Theme를 사용해보자.

 

---

1. Theme

 

Theme를 사용하기 위해서_AppState 클래스의MaterialApp으로 가준다.

 

위와 같이 

_AppState의 build()의 return값인

MaterialApp에 theme이 존재하고

 

theme에 TextTheme 위젯을 선택해

titleLarge로 만들어 주었다.

 

하지만 출력된 화면은 변함이 없다.

 

그 이유는 간단하다.

 

위 사진과 같이

Theme가 있는 곳은 _AppState 클래스이며,

StatefulWidget을 상속받았고

 

현재 화면에서 출력중인 Text 위젯은

MyLargeTitle 클래스이며 그것은 StatelessWidget을

상속 받았기 때문이다.

 

즉, MyLargeTitle이 Theme의 값에 접근을 해야

우리가 보는 화면에 Theme가 적용된다.

 

 

이렇게 접근을 하기 위해서

MyLargeTitle의 build부분의

Buildcontext에 접근해야한다.

 

하지만 그 전에 Flutter의 위젯 트리에 대해 알아보자.

 

 

---

2. Widget Tree

 

위와 같이 Widget의 관계를

Tree모양으로 만든것을 Widget Tree라고 한다.

 

이것의 장점은

Flutter가 애플리케이션을 어떻게 랜더링하는지를

보여주는것과 같다.

 

 

VScode에서는

Widget Inspector를 열어

WidgetTree를 확인할 수 있다.

 

---

3. Build Context

이러한 WidgetTree를 통해

내가 접근하고자 하는 부모요소를

손 쉽게 알 수 있고

 

이러한 정보를 습득 후

BuildContext를 통해 접근을 하는것이다.

 

Context란 현재 My Large Title 위젯 기준으로

Text 이전의 모든 상위 요소들에 대한 정보를 의미하는데

 

그말은 곧 Context는

모든 위젯트리의 정보를 가지고 있고

해당 위치에 접근을 할 수 있게 해준다.

 

---

_AppState 클래스의 

Theme에 저장된

TextStyle을 위와같이

 

MyLargeTitle 클래스의

Text의 TextStyle로 가져올 수 있고

 

Dart의 nullsafety 원칙에 따라

null 방지를 위해 titleLarge에 !를 붙여

titleLarge에는 값이 있다고 알려준 후

 

위의 Text위젯 앞에 const를 떼어주면?

 

위와 같이

StatelessWidget 클래스의 요소인

Text가 

 

StatefulWidget의 

Theme의 요소를 받고있는것을

확인 할 수 있다.

 

💡

? 도 가능하다.

 

---

4. Widget Lifecycle

StatefulWidget은 살아있다.

이 말의 의미는 Lifecycle을 가지고 있다는 말이다.

 

조금 더 이해하기 쉽게 코드와 결과를 봐보자.

 

우선 StatelessWidget을 상속받았던

MyLargeTitle 클래스를 

SatefulWidget으로 바꿔주고

build()말고 또 어떤 method가 있는지 확인해보자.

 

---

 

4-1. initState()

 

initstate()는

상태를 초기화 하기 위한 메서드 이다.

 

이러한 상태 초기화는

int count = 0;

과 같이 초기화 할 수 있기에

잘 사용하지는 않지만

 

종종 부모 요소에 의존하는 데이터를

초기화해야하는 경우가 있다.

 

즉, context를 사용하여 초기화 하는 경우이다.

 

또한 어플리케이션을 업데이트할때도

필요하다.

 

중요한점은

반드시 super.initState();로 호출해야하고

build() 앞에 존재해야한다.

 

이렇게 initState()를 통해

build된 UI들에 들어 있는 값을 초기화하여

새로 태어나게 하는것이다.

 

---

4-2. dispose()

 

 

dispose()는

위젯이 스크린에서 제거될때

호출되는 메서드이다.

 

API 업데이트나

이벤트 리스너로부터 구독을 취소하거나

form의 리스너로부터 벗어나고 싶을때

사용할 수 있다.

 

위젯이 위젯 트리에서 제거되기 전

무언가를 취소하거 싶은 경우

 

무언가를 취소하는 곳이라고 생각하면 편하다.

 

예시를 보자.

 

_AppState 클래스에

bool 타입의 showTitle이란 변수를 만들고

 

showTitle 이 true이면

MyLargeTitle()가 

 

그렇지 않으면

Text('Nothing')이 실행되게 만들자.

 

현재는 showTitle이 true이므로

빨간색의 My Large Title가 보인다.

 

그 반대인 경우에

dispose()가 작동되는지 확인하기 위해

toggleTitle()를 만들고

 

setState()로

showTilte이 true일 경우

false로 바꾸게 만든다.

 

그리고 아래에 내려와

IconButton을 위와 같이 만들어 주었다.

 

 

위와 같이 아이콘이 생성 되었고

 

아이콘을 누르면?

showTitle이 false이므로

Nothing이 출력되고

 

dispose()에 

넣어놓은 print('dispose')가

디버그 콘솔에 출력된다.

 

다시 아이콘을 누르면?

showTitle이 true이므로

 

build()로 만든

Text My Large Title이 출력되고

 

initstate() 와 buid()에

넣어놓은 print()가

디버그 콘솔에 출력된다.

 

---

위와 같이 Stateful Class는 살아있다는것을 확인해 보았다.

 

build()는

우리의 위젯으로 UI를 만들고

 

initstate()는

build()전에 호출되고

변수를 초기화 하고

API를 업데이트하게 해준다.

 

dispose()는

우리의 위젯이 위젯 트리에서 제거될 때

실행되는 메서드이다.