Flutter는 "Everything is a Widget"이라는 철학을 바탕으로, 모든 UI 요소를 위젯으로 표현합니다. 이번 포스팅에서는 Flutter의 핵심 개념과 기본 위젯, 그리고 프로젝트 구조에 대해 자세히 알아보겠습니다.
1. Flutter의 핵심 철학: Everything is a Widget
Flutter에서는 모든 것이 위젯입니다. 버튼, 텍스트, 레이아웃, 그리고 전체 앱 자체도 위젯으로 구성됩니다. 이 위젯 기반 구조는 코드 재사용성과 유연성을 극대화합니다.
선언형 UI 구성 방식
Flutter는 React에서 영감을 받아 선언형 UI 방식을 사용합니다.
즉, 최종 UI 상태를 선언하면, Flutter가 이를 자동으로 렌더링합니다.
명령형 UI와 선언형 UI의 차이
- 명령형 UI는 상태 변경을 직접 명령합니다.
ViewA a = ViewA();
ViewB b = ViewB();
a.setColor(red); // 빨간색이 되어라
b.setColor(yello); // 노란색이 되어라
a.add(b); // b는 a의 child가 되어라- 선언형 UI는 최종 상태만 선언합니다.
return ViewA(
color: red,
child: ViewB(
color: yellow,
),
);
선언형 UI의 장점
- 상태만 선언하면 UI가 자동으로 업데이트됩니다.
- 복잡한 상태 변경 로직 대신 UI의 최종 상태에만 집중할 수 있습니다.
- Flutter의 StatefulWidget과 같은 상태 관리 위젯이 이러한 철학을 기반으로 작동합니다.
2. Flutter 프로젝트 구조
Flutter 앱은 기본적으로 다음과 같은 폴더와 파일 구조를 가집니다:
프로젝트 폴더
- lib/: 주요 Dart 코드가 위치. 앱의 핵심 로직은 여기서 작성됩니다.
- pubspec.yaml: 프로젝트 의존성 및 리소스를 관리하는 설정 파일입니다.
- android/, ios/: 각 플랫폼의 네이티브 코드가 포함됩니다.
- main.dart: 앱의 시작점이자 진입점입니다.
Flutter 프로젝트 시작하기
- main.dart 파일에서 main() 함수로 실행이 시작됩니다.
- 앱의 뼈대를 구성하는 MaterialApp과 레이아웃을 담당하는 Scaffold 위젯을 사용합니다.
3. Flutter의 기본 위젯
플랫폼별 위젯
- Material 위젯: Google의 Material Design 가이드를 따릅니다.
- Cupertino 위젯: Apple의 Human Interface Guideline 기반으로 iOS 스타일의 UI를 구현합니다.
기본 위젯
Text
Text('Hello, Flutter');- 텍스트를 표시하는 위젯.
Row와 Column
Row(
children: [
Text('Item 1'),
Text('Item 2'),
],
);- Row: 수평으로 배치.
- Column: 수직으로 배치.
Container
Container(
color: Colors.amber,
padding: EdgeInsets.all(10),
child: Text('Hello'),
);- 박스 위젯으로, 배경, 테두리, 여백 등을 설정할 수 있습니다.
Stack
Stack(
children: [
Container(color: Colors.red),
Positioned(
top: 10,
left: 10,
child: Text('Top Left'),
),
],
);- 위젯을 겹쳐서 배치합니다.
4. 상태 관리와 위젯 분류
Flutter의 위젯은 상태 관리 방식에 따라 두 가지로 나뉩니다.
1) StatelessWidget
- 상태가 없는 정적 위젯.
- 한 번 렌더링된 후 변경되지 않습니다.
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('I am Stateless');
}
}2) StatefulWidget
- 상태가 변경될 수 있는 동적 위젯.
- 상태 변화 시 UI가 재렌더링됩니다.
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
String text = 'Hello';
void updateText() {
setState(() {
text = 'Updated';
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(text),
ElevatedButton(onPressed: updateText, child: Text('Update')),
],
);
}
}5. Flutter 화면 구성 패턴
Flutter 앱의 화면은 다음 패턴을 따릅니다.
기본 구조
- MaterialApp으로 앱을 감쌉니다.
- Scaffold를 사용하여 기본 레이아웃을 정의합니다.
- AppBar와 body를 추가하여 화면 구조를 구성합니다.
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);6. Flutter의 장점
- 생산성 증가: 선언형 UI와 핫 리로드(Hot Reload) 기능으로 빠른 개발 가능.
- 퍼포먼스: Flutter는 네이티브 성능에 가까운 UI를 제공합니다.
- 크로스 플랫폼: 한 번의 코드 작성으로 Android와 iOS 앱 개발.