1. Intro
VSCode를 사용하신다면 Project Root에 .vscode/settings.json 파일을 생성하고, 아래 설정을 넣어주세요
설치하면 편리한 VSCode Extensions(optional이지만 있으면 편해요)
2. 기본 Widget
•
Flutter의 UI는 모두 Widget 으로 구성됩니다. 간단한 Widget부터 복잡한 Widget순서대로 자주 사용하는 Widget들을 학습합니다
2.1 Widget이란? (feat. Stateless vs Stateful)
•
Widget은 Flutter 앱을 구성하는 기본 단위입니다. Flutter에서는 모든 UI 요소가 Widget으로 구성되어 있습니다
•
Widget의 핵심 특징:
◦
불변(Immutable)입니다 - 한번 생성되면 직접 변경할 수 없습니다
◦
계층 구조를 가집니다 - Widget들은 트리 형태로 구성됩니다
◦
선언적입니다 - UI를 코드로 직접 선언합니다
StatelessWidget vs StatefulWidget
Flutter Widget의 생명주기(Lifecycle)란?
2.2 Text (feat. flutter create)
•
앱 화면에 텍스트를 표시할 때 사용하는 가장 기본적인 위젯
주요 속성
2.3 Icon, IconButton
Icon
IconButton
2.4 TextButton vs OutlinedButton vs ElevatedButton vs FilledButton
TextButton
OutlinedButton
ElevatedButton
FilledButton
Button 비교
2.5 TextField vs TextFormField
•
Flutter에서 TextField와 TextFormField는 모두 텍스트 입력 필드를 제공하는 위젯이지만, 주로 사용 목적과 속성에서 차이점이 있습니다.
◦
TextField는 간단한 텍스트 입력을 위한 기본 위젯
◦
TextFormField는 폼(form) 입력에서 주로 사용되어 검증 기능을 추가할 수 있는 확장된 기능 제공
TextField
TextFormField
TextField vs TextFormField 비교
2.6 Container, Padding, SizedBox
•
Flutter에서 Container, Padding, SizedBox는 레이아웃을 구성하고 위젯 간의 간격을 조정하는 데 자주 사용되는 위젯입니다.
Container
Padding
SizedBox
Container vs Padding vs SizedBox
3. Layout Widget
•
Layout 위젯은 다른 위젯들을 배치하거나 정렬하는 데 사용되는 Flutter의 주요 위젯 유형입니다.
•
단일 위젯이나 여러 위젯을 다양한 방식으로 배치하여 원하는 사용자 인터페이스를 구현할 수 있습니다
•
Layout 위젯을 사용하면 위젯의 위치, 크기, 정렬 방식을 유연하게 조정할 수 있습니다.
3.1 Column, Row, Stack
Column
Row
Stack
3.2 AppBar, TabBar, BottomNavigationBar
AppBar
TabBar
BottomNavigationBar
4. Flutter Gemini를 활용한 챗봇 구현
4.1 Scaffold와 AppBar설정
•
소스코드를 참고해주세요:
4.2 png파일 활용 방법
•
소스코드를 참고해주세요:
4.3 재사용 가능한 Custom Widget 활용 방법
•
Flutter의 Extract Widget 기능은 코드에서 반복적으로 사용되는 UI 요소를 재사용 가능하고, 더 깔끔하게 관리할 수 있도록 Custom Widget으로 추출하는 방법입니다.
•
이 기능을 사용하면 코드의 가독성이 향상되고, 유지보수가 쉬워집니다. Flutter의 Extract Widget은 특히 위젯의 구조가 복잡해질 때 매우 유용합니다
Extract Widget을 활용한 Custom Widget생성
4.4 채팅 입력 Widget 구현과 svg 파일 활용 방법
•
“공식” 패키지 활용: 
Dart packagesflutter_svg | Flutter package
Dart packagesflutter_svg | Flutter package4.5 ListView.separated()를 활용한 채팅 리스트 구현
•
소스코드를 참고해주세요: 
chat_page.dart#L71
chat_page.dart#L714.6 TextField를 활용한 사용자 인풋 처리
•
소스코드를 참고해주세요: chat_page.dart#L86
chat_page.dart#L864.7 Flutter Gemini 연동과 환경변수 사용 방법
5. Outro
•
조금 더 복잡한 어플리케이션을 플러터로 구현하는 레벨업 강의로 돌아오겠습니다!
