Flutter의 구조 - 위젯, 상태, 레이아웃
Flutter
구글이 개발한 오픈 소스 UI 툴킷으로, 단일 코드베이스를 사용하여 모바일, 웹, 데스크탑 애플리케이션을 동시에 개발할 수 있게 해주는 플랫폼으로, Dart라는 프로그래밍 언어를 기반으로 하며, 높은 성능과 사용자 인터페이스를 제공하는 데 중점을 두고 설계되었다.
Flutter 특징
-
크로스 플랫폼 지원:
Flutter는 하나의 코드베이스로 Android, iOS, 웹, 데스크탑(Windows, macOS, Linux) 애플리케이션을 동시에 개발할 수 있다. -
빠른 개발 (Hot Reload):
핫 리로드 기능을 통해 코드 수정 후 즉시 변경 사항을 반영할 수 있어, 개발 속도가 빠르다. -
위젯 기반 아키텍처:
모든 UI 요소는 위젯으로 구성되어 있으며, 위젯은 재사용 가능하고 조합하여 복잡한 UI를 쉽게 구축할 수 있다. -
우수한 성능:
C++로 작성된 엔진과 Skia 그래픽 엔진을 사용하여 하드웨어와 직접 상호작용함으로써 높은 성능을 제공한다. -
강력한 커스터마이징:
기본 제공 위젯을 쉽게 커스터마이징할 수 있으며, 새로운 위젯을 만들어 독창적인 디자인을 구현할 수 있다.
위젯 (Widgets)
Flutter의 모든 UI 요소는 위젯으로 구성된다.
-
StatelessWidget: 상태를 가지지 않는 위젯으로 생성 후 변경되지 않는 데이터를 표현할 때 사용한다. ex) 텍스트, 아이콘, 이미지
-
StatefulWidget: 상태를 가지는 위젯으로, 사용자의 입력이나 데이터 변경에 따라 UI가 동적으로 변화할 수 있다. StatefulWidget은 두 개의 클래스(위젯 클래스와 상태 클래스)로 구성된다.
상태 (State)
위젯의 데이터나 속성을 나타내며, UI의 외관과 동작을 결정하는 요소이다.
-
setState: StatefulWidget에서 상태가 변경되면 setState 메서드를 호출하여 UI를 다시 그릴 수 있다.
-
상태 관리 방법: Provider, Riverpod, Bloc, Redux 등이 있으며, 각각의 방법은 상황에 따라 적합하게 선택하여 사용할 수 있다.
레이아웃 (Layouts)
Flutter는 UI 요소를 정렬하고 배치하는 데 필요한 다양한 레이아웃 위젯을 제공한다.
-
Column: 자식 위젯을 수직으로 정렬한다. 주로 세로 방향으로 배치할 때 사용한다.
-
Row: 자식 위젯을 수평으로 정렬한다. 주로 가로 방향으로 배치할 때 사용한다.
-
Stack: 자식 위젯을 겹쳐서 배치한다. 특정 위젯을 다른 위젯 위에 표시할 수 있다.
-
Container: 여러 속성을 가진 박스 위젯으로, 크기, 색상, 패딩, 마진 등을 설정할 수 있다.
-
ListView: 스크롤 가능한 목록을 만든다. 데이터가 많을 때 유용하다.
-
GridView: 격자 형태의 스크롤 가능한 목록을 만든다. 이미지 갤러리와 같은 UI에 적합하다.
