Ch01. Flutter 기초 - 위젯부터 인스타 클론까지

Mon, 13 Apr 2026 00:00:00 +0900

iOS 개발하다가 Flutter 시작한 지 얼마 안 됐는데, 처음부터 정리해보려고 한다. Ch01은 기본 위젯부터 시작해서 최종적으로 인스타그램 클론 UI까지 만드는 과정이다.

Container - 가장 기본적인 박스

SwiftUI에서 .background, .border, .shadow 이런 modifier 조합으로 스타일링하는 것과 비슷하게, Flutter에서는 Container + BoxDecoration으로 처리한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


Container(
 width: 300,
 height: 300,
 decoration: BoxDecoration(
 color: Colors.pink.shade50,
 border: Border.all(color: Colors.red, width: 5),
 borderRadius: BorderRadius.circular(10),
 boxShadow: [
 BoxShadow(color: Colors.black, offset: Offset(6, 6))
 ],
 ),
 child: Center(
 child: Container(
 color: Colors.yellow,
 padding: EdgeInsets.symmetric(horizontal: 20),
 margin: EdgeInsets.symmetric(horizontal: 10),
 child: Text('Hello Container'),
 ),
 ),
)

SwiftUI에서는 padding이 modifier 체이닝 순서에 따라 안/밖이 달라지는데, Flutter는 padding과 margin이 명확히 분리돼 있어서 오히려 직관적인 편이다.

레이아웃 - Column, Row, Flexible

SwiftUI의 VStack, HStack이 Flutter에서는 Column, Row다. 거의 1:1 대응이라 어색하지 않았다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Container(width: 100, height: 80, color: Colors.red),
 Container(width: 100, height: 80, color: Colors.blue),
 Container(width: 100, height: 80, color: Colors.green),
 ],
 ),
 Container(width: 300, height: 90, color: Colors.grey),
 ],
)

비율 배치는 Flexible의 flex 속성으로 한다. SwiftUI의 .frame(maxHeight: .infinity) 같은 것보다 깔끔함.

1
2
3
4
5
6
7
8


Column(
 children: [
 Flexible(flex: 1, child: Container(color: Colors.red)),
 Flexible(flex: 2, child: Container(color: Colors.blue)),
 Flexible(flex: 3, child: Container(color: Colors.green)),
 Flexible(flex: 4, child: Container(color: Colors.yellow)),
 ],
)

1:2:3:4 비율로 화면을 나눠줌. Expanded는 Flexible의 fit: FlexFit.tight 버전이라 남은 공간을 무조건 채운다.

Stack - 위젯 겹치기

SwiftUI의 ZStack이 Flutter에서는 Stack이다. 자식 위젯의 위치는 Align이나 Positioned로 잡는다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


Stack(
 children: [
 Container(width: 500, height: 500, color: Colors.black),
 Container(width: 400, height: 400, color: Colors.red),
 Container(width: 300, height: 300, color: Colors.blue),
 Align(
 alignment: Alignment.topRight,
 child: Container(width: 200, height: 200, color: Colors.green),
 ),
 ],
)

Positioned는 top, left, right, bottom 값으로 절대 위치를 지정하고, Align은 상대 위치를 지정하는 차이가 있다.

StatelessWidget vs StatefulWidget

SwiftUI에서는 @State로 상태를 선언하면 끝인데, Flutter는 StatelessWidget과 StatefulWidget이 명확히 나뉜다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


// 상태 없는 위젯 - 한 번 그리면 끝
class ExampleStateless extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(color: Colors.red);
 }
}

// 상태 있는 위젯 - setState로 업데이트
class ExampleStateful extends StatefulWidget {
 final int index;
 const ExampleStateful({required this.index});

 @override
 State<ExampleStateful> createState() => _ExampleStatefulState();
}

class _ExampleStatefulState extends State<ExampleStateful> {
 late int _index;

 @override
 void initState() {
 super.initState();
 _index = widget.index;
 }

 @override
 Widget build(BuildContext context) {
 return GestureDetector(
 onTap: () {
 setState(() {
 _index = _index == 5 ? 0 : _index + 1;
 });
 },
 child: Container(
 color: Colors.blue,
 child: Center(child: Text('index: $_index')),
 ),
 );
 }
}

처음에 setState 쓰는 게 좀 번거로웠는데, SwiftUI의 @State가 내부적으로 해주는 걸 Flutter는 직접 명시하는 거라고 생각하니까 이해됐다. initState는 SwiftUI의 .onAppear, dispose는 .onDisappear랑 비슷한 라이프사이클이다.

입력 위젯들

Checkbox, Radio, Slider, Switch 같은 기본 입력 위젯들도 전부 StatefulWidget + setState 패턴이다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// Slider 예제
class TestSlider extends StatefulWidget {
 @override
 State<TestSlider> createState() => _TestSliderState();
}

class _TestSliderState extends State<TestSlider> {
 double value = 0;

 @override
 Widget build(BuildContext context) {
 return Column(
 children: [
 Text('$value'),
 Slider(
 value: value,
 onChanged: (newValue) => setState(() => value = newValue),
 divisions: 100,
 activeColor: Colors.red,
 ),
 ],
 );
 }
}

iOS 스타일을 쓰고 싶으면 CupertinoSwitch, CupertinoContextMenu 같은 Cupertino 위젯도 있다. Material이랑 Cupertino를 섞어서 쓸 수 있는 게 Flutter의 장점인듯.

네비게이션 - GoRouter

Flutter의 기본 Navigator도 있지만, go_router 패키지가 훨씬 편하다. SwiftUI의 NavigationStack + .navigationDestination과 비슷한 느낌.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


MaterialApp.router(
 routerConfig: GoRouter(
 initialLocation: '/',
 routes: [
 GoRoute(
 path: '/',
 name: 'home',
 builder: (context, _) => const HomeWidget(),
 ),
 GoRoute(
 path: '/new',
 name: 'new',
 builder: (context, _) => const NewPage(),
 ),
 ],
 ),
)

화면 이동은 context.pushNamed('new'), 뒤로가기는 context.pop(). 직관적이다.

BottomNavigationBar는 SwiftUI의 TabView와 같은 역할인데, currentIndex와 onTap으로 탭 전환을 직접 관리한다.

1
2
3
4
5
6
7
8


BottomNavigationBar(
 currentIndex: index,
 onTap: (newIndex) => setState(() => index = newIndex),
 items: [
 BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: '홈'),
 BottomNavigationBarItem(icon: Icon(Icons.search), label: '검색'),
 ],
)

ThemeData

앱 전체 스타일을 한 곳에서 관리하는 건 SwiftUI랑 비슷하다. ColorScheme이랑 TextTheme을 설정해두면 Theme.of(context)로 어디서든 가져다 쓸 수 있다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


MaterialApp(
 theme: ThemeData(
 colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
 textTheme: TextTheme(
 bodyMedium: TextStyle(fontWeight: FontWeight.normal, fontSize: 28),
 ),
 ),
)

// 사용할 때
final textTheme = Theme.of(context).textTheme;
Text('Press Count', style: textTheme.bodyMedium);

인스타그램 클론 - 배운 거 총동원

Ch01 마무리로 인스타그램 클론 UI를 만들었다. 위에서 배운 거 거의 다 써먹은 프로젝트다.

구조

1
2
3
4
5
6


lib/
├── main.dart // 앱 진입점, 테마, 하단 탭
├── body.dart // 탭별 화면 라우팅
└── screen/
 ├── home_screen.dart // 피드, 스토리
 └── search_screen.dart // 검색, 그리드

메인 - 테마와 탭 바

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


MaterialApp(
 home: const InstaCloneHome(),
 theme: ThemeData(
 colorScheme: const ColorScheme.light(
 primary: Colors.white,
 secondary: Colors.black,
 ),
 bottomNavigationBarTheme: const BottomNavigationBarThemeData(
 showSelectedLabels: false,
 showUnselectedLabels: false,
 selectedItemColor: Colors.black,
 ),
 ),
)

인스타그램 특유의 흰 배경 + 검정 아이콘 스타일을 ColorScheme으로 잡았다. AppBar에는 google_fonts 패키지로 Lobster Two 폰트를 적용했다.

스토리 영역 - 가로 스크롤

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


class StoryArea extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: Row(
 children: List.generate(
 10,
 (index) => UserStory(userName: 'User $index'),
 ),
 ),
 );
 }
}

SwiftUI에서 ScrollView(.horizontal) 안에 HStack 넣는 것과 같은 패턴. List.generate로 더미 데이터를 만들어서 넣었다.

피드 리스트

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


class FeedData {
 final String userName;
 final int likeCount;
 final String content;
 const FeedData({required this.userName, required this.likeCount, required this.content});
}

class FeedList extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return ListView.builder(
 shrinkWrap: true,
 physics: NeverScrollableScrollPhysics(),
 itemBuilder: (context, index) => FeedItem(feedDataList[index]),
 itemCount: feedDataList.length,
 );
 }
}

여기서 shrinkWrap: true랑 NeverScrollableScrollPhysics()가 핵심이다. 부모가 SingleChildScrollView니까 ListView가 자체 스크롤하면 충돌한다. shrinkWrap으로 콘텐츠 크기만큼만 차지하게 하고, 스크롤은 부모한테 위임하는 거다.

검색 화면 - GridView

1
2
3
4
5
6
7
8


GridView.count(
 crossAxisCount: 3,
 mainAxisSpacing: 4,
 crossAxisSpacing: 4,
 shrinkWrap: true,
 physics: const NeverScrollableScrollPhysics(),
 children: gridItem.map((color) => Container(color: color)).toList(),
)

3열 그리드. SwiftUI의 LazyVGrid와 비슷한데, GridView.count가 더 간결하다.

정리

주제	SwiftUI	Flutter
박스 스타일링	modifier 체이닝	Container + BoxDecoration
수직/수평 배치	VStack / HStack	Column / Row
비율 배치	.frame + GeometryReader	Flexible / Expanded
겹치기	ZStack	Stack + Align/Positioned
상태관리	@State	StatefulWidget + setState
화면전환	NavigationStack	GoRouter
전역 테마	.environment	ThemeData + Theme.of(context)

전반적으로 SwiftUI보다 보일러플레이트가 좀 더 많긴 한데, 그만큼 명시적이라서 코드를 읽을 때 뭘 하는지 파악이 더 쉬운 것 같다. 특히 레이아웃 시스템은 SwiftUI보다 예측 가능해서 좋았음. GeometryReader 같은 트릭 안 써도 Flexible로 비율 잡으면 깔끔하게 떨어진다.

다음 Ch02에서는 토스 앱 클론 만들면서 좀 더 실전적인 UI를 다룰 예정이다.

SetState on jHoon