[flutter]build 메소드

fleecy·2023년 7월 8일

플러터

목록 보기
2/7

flutter가 만드는 프로그램의 UI는 widget으로만 구성된다.
즉 위젯은 UI의 특정 부분이 화면에 어떻게 그려질지 기술한다.
위젯들은 부모 자식 관계를 가지며 위젯 트리를 형성한다.
각 위젯의 주작업은 build() 메서드를 기술하는 것이다.
프레임워크가 위젯들을 차례차례 화면에 출력할 것이다.

build()

위젯을 출력하는 메서드.
즉, 구현한 UI 요소를 화면에 띄운다.

@protected
Widget build(
	BuildContext context
)

build 호출

호출 시점

  1. 해당 위젯이 주어진 BuildContext의 위젯 트리에 삽입될 때
  2. 의존하는 위젯이 변경될 때 (e.g., an InheritedWidget referenced by this widget changes)

BuildContext란?

  1. 현재 빌딩되는 위젯의 트리 속 위치 정보를 저장하는 클래스
    • 위젯의 고유한 요소.
    • 위젯 트리 속 위젯의 위치를 찾을 수 있다. 또한 트리에서 가까운 위젯으로 접근할 수 있다.
  2. 빌드에 대한 정보를 저장하는 객체
    • 지원되는 최소 및 최대 플러터 버전, 기기 화면 크기 및 픽셀 밀도, 현재 활성화된 테마 등 정보를 저장한다.

호출 side effect를 주의하라

"This method can potentially be called in every frame and should not have any side effects beyond building a widget"

build() 메서드는 잠재적으로 언제든 호출될 수 있기에 주의가 필요하다. 다음은 의도치 않은 호출을 줄이는 방법이다.

  1. setState()로 state를 변경해야한다. 직접 local state을 변경하지 말라.
  2. state를 조작과 비동기 코드 호출
    1. 허용
      1. initState() 내부(O)
      2. GestureDetector이나 button's callback 내부(O)
      3. blocs 내부 혹은 custom model classes that your widgets listen to(O)
      4. listeners 내부(O)
    2. 불허
      1. build() 내부(X)
      2. builder callback 내부(e.g. MaterialPageRoute, FutureBuilder, ValueListenableBuilder etc.)(X)
      3. 위젯을 반환하는 모든 메소드 내부(X)

Side Effects in Flutter: What they are and how to avoid them(https://codewithandrea.com/articles/side-effects-flutter/)


reference

  1. flutter 공식페이지 중
    (https://docs.flutter.dev/ui/widgets-intro)
    (https://api.flutter.dev/flutter/widgets/StatelessWidget/build.html)
  2. BuildContext

0개의 댓글