Flutter

[Flutter] 14. 플러터 기본기 다지기 (2) - 나만의 플러터 위젯 분류

Song hyun 2024. 11. 5. 10:10
728x90
반응형

[Flutter] 14. 플러터 기본기 다지기 (2) - 나만의 플러터 위젯 분류

 

1. 플러터와 위젯

-Flutter는 풍부한 UI 위젯을 제공한다. 

-자세한 정보는 Flutter 공식 문서에서 확인할 수 있다.

 

https://docs.flutter.dev/ui/widgets

 

Widget catalog

A catalog of some of Flutter's rich set of widgets.

docs.flutter.dev

 

 

2. 플러터 위젯의 종류

 

(1) 플랫폼 별 위젯 

  • 대부분의 경우 Material 위젯을 사용한다.
  • 플랫폼별 특성을 살리고 싶다면, 각각의 위젯을 적절히 활용할 수 있다.
Material(Android) 위젯 Cupertino(iOS) 위젯
Google의 Material Design 가이드라인을 따르는 위젯들 Aplle의 Human Interface Guidelines를 기반으로 한 iOS 스타일 위젯들

 

 

(2) 기본 위젯 (Basic Widgets)

  • 아래와 같은 위젯들을 조합하고, 커스터마이징해 원하는 UI를 구현할 수 있다.
  • Flutter의 강력함은 이런 유연성-확장성에 있다.
Text 위젯 다양한 스타일의 텍스트를 표현한다.
Row/Column 위젯 CSS의 flexbox와 비슷한 방식으로, 수평-수직 개념을 표현한다.
Stack/Positioned 위젯 위젯들을 겹쳐 배치할 수 있게 하는 것이 stack 위젯, positioned 위젯과 함께 사용할 경우 정교한 위지 조정이 가능해진다.
Container 위젯 다재다능한 박스 위젯으로, 다양한 스타일링이 가능해진다.

 

 

(3) 상태 관리에 따른 위젯 분류

  • Flutter 에서는 상태 관리 방식에 따라 위젯을 두 가지로 분류한다.
  • 성능 최적화를 위해서는 Stateless Widget을 사용하는 게 좋다.
  • Stateless Widget은 빌드 시 한 번만 생성되나, Stateful Widget은 상태 변경 시마다 재빌드된다.
Stateless Widget -내부 상태가 없는 정적 위젯
-한 번 렌더링 된 후 변경되지 않는다.
Stateful Widget -동적 상태를 가진 위젯
-사용자 상호 작용이나 이벤트에 따라, UI가 변경될 수 있다.

 

 

 

3. Flutter 프로젝트 구조 이해하기

-Flutter 프로젝트를 효과적으로 개발하기 위해서는 기본 구조를 이해해야 한다.

프로젝트 폴더 구조 -플랫폼별 폴더
-lib 폴더:
-pubspec.yaml:
시작점 (entry point) -lib/main.dart:
-새 프로젝트
728x90
반응형