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

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

 

1. 플러터와 위젯

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

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

 

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

Widget catalog

 

 

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: -새 프로젝트