이 글은 아래 영상과 관련이 있습니다.
https://www.youtube.com/watch?v=wE7khGHVkYY&list=PLOU2XLYxmsIJyiwUPCou_OVTpRIn_8UMd&index=2
개요
이 기사에서는 Flutter가 상태 비저장 위젯을 시작하고 실행하는 방법을 살펴보겠습니다.
첫째, 위젯은 Flutter 앱의 기본 단위를 나타내는 객체이며 각 위젯은 불변의 UI 객체와 같습니다.
위젯은 버튼이나 메뉴, 글꼴이나 색상의 스타일 요소, 패딩과 같은 레이아웃 요소 등이 될 수 있습니다. 또한 기존 위젯에서 새 위젯을 만들 수 있습니다. 위젯을 결합하여 새로운 위젯을 만들거나 기존 위젯을 수정하여 위젯을 만들 수 있으므로 위젯의 조합은 무한합니다.
상태 비저장 위젯이란 무엇입니까?
상태 비저장 위젯은 여러 자식과 이들을 결합하는 Build 메서드로 구성된 위젯입니다.
또한 상태 비저장 위젯에는 변경 가능한 상태가 없어야 합니다. 예를 들어 정기적으로 업데이트되는 텍스트 필드와 다른 변수에 따라 변경되는 동적 위젯이 있습니다.
위의 이미지는 상태 비저장 위젯의 매우 간단한 예입니다.
MyWidget이라는 Stateles 위젯은 자식인 컨테이너 위젯과 컨테이너의 자식인 텍스트 위젯으로 구성됩니다. 실행 중에 MyWidget의 변경 사항은 없습니다. 컨테이너 위젯의 패딩이나 색상과 텍스트 위젯의 “hello” 텍스트는 모두 변하지 않는 상수 값입니다.
Flutter에서는 중간에 상태가 변경되지 않는 위젯을 stateless 위젯이라고 합니다.
상태 비저장 위젯 작동 방식
이전에 상태 비저장 위젯이 구성되는 방식을 살펴보았습니다. 그러면 상태 비저장 위젯을 표시하는 프로세스는 무엇입니까?
일반적으로 Flutter 앱은 트리 모양으로 구성된 위젯 집합입니다. 우리는 그것을 위젯 트리라고 부릅니다. 완전히 틀린 말은 아닙니다. 그러나 위젯은 앱 사용자 인터페이스의 일부만을 구성합니다. 한마디로 설계도입니다.
그렇다면 이 구성은 무엇을 위한 것입니까? 빨리 요소보지마. 요소는 화면에 직접 표시되는 위젯의 실제 개체입니다. 또한 아이템 트리는 실제로 디바이스에 표시되는 위젯의 구조를 나타냅니다.
각 위젯 클래스에는 해당 요소 클래스와 인스턴스(요소)를 만드는 메서드가 있습니다.
위의 createElement 메소드는 Stateless 위젯에 요소를 생성할 때 사용하는 메소드로 위젯이 트리에 마운트될 때 호출됩니다.
따라서 우리가 실제로 보는 앱의 화면은 위젯에 의해 생성된 인스턴스인 요소들로 구성된 트리라고 할 수 있습니다.
위의 내용을 바탕으로 위젯이 우리 눈에 보이기까지의 과정을 살펴보자.
- 먼저 Flutter는 위젯 트리에 위젯을 추가하고 위젯에 항목을 요청합니다. (아이템 생성)
- 항목을 생성한 위젯의 정보와 함께 항목 트리에 항목이 추가됩니다.
- 다음으로 요소는 위젯의 Build 메서드를 호출합니다.
- Build 메서드가 호출되면 위젯의 자식 위젯이 체인에서 1~4단계를 반복하여 위젯 트리와 항목 트리를 형성합니다.
위의 과정을 거친 후 Flutter 앱에는 두 개의 트리가 있습니다.
하나는 위젯의 청사진과 같은 위젯 트리이고, 다른 하나는 화면에 표시되는 실제 구조인 요소 트리입니다.
이제 앱의 맨 처음에 위젯을 가져오는 데 필요한 것이 무엇인지 살펴보겠습니다.
바로, runApp 메서드입니다. 위의 main() 함수를 보면 runApp 메서드를 찾을 수 있습니다.
runApp()은 앱의 시작점과 같으며 위젯을 가져와서 앱의 루트 요소로 만듭니다.
정리하다
이 기사에서는 상태 비저장 위젯의 개념과 Flutter가 상태 비저장 위젯을 화면에 표시하는 방법에 대해 배웠습니다. 또한 상태 비저장 위젯은 변경되지 않는 요소로 구성된 위젯임을 알 수 있습니다.
그렇다면 상태를 동적으로 변경하는 앱을 만들려면 어떤 방법을 사용해야 할까요?
이는 Flutter의 Stateful Widget으로 수행할 수 있습니다. 다음 글에서는 Stateless Widget의 반대 개념인 Stateful Widget에 대해 알아보겠습니다.