flutter가 만드는 프로그램의 UI는 widget으로만 구성된다.
즉 위젯은 UI의 특정 부분이 화면에 어떻게 그려질지 기술한다.
위젯들은 부모 자식 관계를 가지며 위젯 트리를 형성한다.
각 위젯의 주작업은 build() 메서드를 기술하는 것이다.
프레임워크가 위젯들을 차례차례 화면에 출력할 것이다.
build()
위젯을 출력하는 메서드.
즉, 구현한 UI 요소를 화면에 띄운다.
@protected
Widget build(
BuildContext context
)
build 호출
호출 시점
- 해당 위젯이 주어진 BuildContext의 위젯 트리에 삽입될 때
- 의존하는 위젯이 변경될 때 (e.g., an InheritedWidget referenced by this widget changes)
BuildContext란?
- 현재 빌딩되는 위젯의 트리 속 위치 정보를 저장하는 클래스
- 위젯의 고유한 요소.
- 위젯 트리 속 위젯의 위치를 찾을 수 있다. 또한 트리에서 가까운 위젯으로 접근할 수 있다.
- 빌드에 대한 정보를 저장하는 객체
- 지원되는 최소 및 최대 플러터 버전, 기기 화면 크기 및 픽셀 밀도, 현재 활성화된 테마 등 정보를 저장한다.
호출 side effect를 주의하라
"This method can potentially be called in every frame and should not have any side effects beyond building a widget"
build() 메서드는 잠재적으로 언제든 호출될 수 있기에 주의가 필요하다. 다음은 의도치 않은 호출을 줄이는 방법이다.
- setState()로 state를 변경해야한다. 직접 local state을 변경하지 말라.
- state를 조작과 비동기 코드 호출
- 허용
- initState() 내부(O)
- GestureDetector이나 button's callback 내부(O)
- blocs 내부 혹은 custom model classes that your widgets listen to(O)
- listeners 내부(O)
- 불허
- build() 내부(X)
- builder callback 내부(e.g. MaterialPageRoute, FutureBuilder, ValueListenableBuilder etc.)(X)
- 위젯을 반환하는 모든 메소드 내부(X)
Side Effects in Flutter: What they are and how to avoid them(https://codewithandrea.com/articles/side-effects-flutter/)
reference
- flutter 공식페이지 중
(https://docs.flutter.dev/ui/widgets-intro)
(https://api.flutter.dev/flutter/widgets/StatelessWidget/build.html)
- BuildContext