홈앤서비스 SK BROADBAND

플러터(Flutter)와 Dart 다트 언어의 문법을 잘 익히는 것도 중요하다. 하지만 문법을 이해했다고 실무 개발을 잘하는 것은 아니다. 반면 실제 프로젝트를 직접 코딩하며 만들어보면 플러터 이해하기가 더 쉽고 실무 개발을 이해하는데도 더 도움이 된다.

이 책은 실제로 서비스되고 있는 3가지 앱의 화면을 직접 만들어 보면서 실무에서 바로 적용할 수 있는 개념과 기법을 배울 수 있도록 구성되었다. 이 책에서는 다음과 같이 비교적 쉽게 접근할 수 있는 난이도의 모두의마켓 앱, 모두의컬리 앱 화면부터 상당히 수준 높은 모두의플레이 앱 화면까지 3가지 유형의 앱 UI 프로젝트 만든다. 3가지 유형의 앱 화면 만들기 프로젝트를 차근차근 수행하다보면 어느새 플러터 앱 개발할 할 수 있다는 자신감이 얻을 수 있을 것이다.

Chapter 01 모두의마켓 UI 만들어보기
01 _ 1 앱 뼈대 만들기
폴더 및 파일 만들기
pubspec.yaml 파일 설정하기
main_screens.dart 기본 코드 작성
앱 테마 설정하기
main.dart 파일 완성하기

01 _ 2 메인화면 만들기
MainScreens 위젯 기본 코드 작성하기
primaryColor 설정하기
IndexedStack의 하위 위젯 만들기
MainScreens 위젯 완성하기

01 _ 3 홈 화면 만들기
AppBar 만들기
화면에 사용할 샘플 데이터 만들기
독립된 파일로 위젯 만들기
HomeScreen 위젯 완성하기

01 _ 4 나의 당근 화면 만들기
나의 당근 화면 기본 코드 입력하기
나의 당근 화면 Header 위젯 만들기
모델 클래스 만들기
하단 Card 메뉴 위젯 만들기
MyCarrotScreen 위젯 완성하기

01 _ 5 채팅화면 만들기
모델 클래스 및 샘플 데이터 만들기
재사용 위젯 만들기
ChattingScreen 위젯 기본 코드 입력하기
ChatContainer 위젯 만들기
ChattingScreen 위젯 완성하기

01 _ 6 동네생활 화면 만들기
모델 클래스 및 샘플 데이터 만들기
NeighborhoodLifeScreen 위젯 기본 코드 입력하기
LifeHeader 위젯 만들기
LifeBody 위젯 만들기
NeighborhoodLifeScreen 위젯 완성하기

01 _ 7 내 근처 화면 만들기
모델 클래스 및 샘플 데이터 만들기
NearMeScreen위젯 기본 코드 입력하기
TextField 위젯 만들기
수평 방향으로 스크롤 되는 위젯 만들기
Wrap 위젯 사용해 보기
Storeltem 위젯 만들기
NearMeScreen 위젯 완성하기

Chapter 02 모두의컬리 UI 만들어보기
02 _ 1 앱 뼈대 만들기
폴더 만들기
프로젝트 전체에서 사용할 기본 파일 만들기
pubspec.yaml 파일 설정하기
프로젝트에 사용할 아이콘 및 이미지 추가하기

02 _ 2 Splash 화면 만들기
splash_screen.dart 파일 기본 코드 작성
main_screens.dart 기본 코드 작성
routes.dart 파일 코드 작성
constants.dart 파일 코드 작성
theme.dart 파일 코드 작성
main.dart 파일 코드 작성
splash_screen.dart 파일 코드 작성

02 _ 3 mainScreens 위젯 만들기
StatefulWidget 위젯으로 변경하기
IndexedStack 위젯에 들어갈 자식 위젯 만들기
Indexed 위젯 추가하기
bottomNavigationBar 데이터 모델 클래스 만들기
MainScreens 위젯 완성하기

02 _ 4 마이컬리 화면 만들기
공통 위젯 만들기
AppBar 만들기
MyKurlyHeader 위젯 만들기
데이터 모델 클래스 만들기
MyKurlyBody 위젯 만들기
MyKurlyScreen 위젯 완성하기

02 _ 5 로그인 화면 만들기
SignInScreen 기본 위젯 만들기
SignInScreen Appbar 만들기
KurlySignForm 위젯 만들기

02 _ 6 홈 화면 만들기
홈 화면 TabBar 만들기
데이터 모델 클래스 만들기
TabBarView 컬리추천 화면 만들기
TabBarView 신상품 화면 만들기
TabBarView 금주 혜택 화면 만들기
TabBarView 알뜰쇼핑 화면 만들기

02 _ 7 상세보기 화면 만들기
상세보기 화면 기본 코드 작성하기
arguments 객체 설정하기
Body 위젯 완성하기

02 _ 8 카테고리 화면 만들기
카테고리 화면 기본 코드 입력하기
모델 클래스 및 샘플 데이터 만들기
SliverList 안에 들어갈 ExtendslconTextCard 위젯 만들기
SliverGrid 안에 들어갈 ImageTextCard 위젯 만들기
카테고리 화면 완성하기

02 _ 9 검색화면 만들기
검색화면 기본 코드 입력하기
DefaultSearchField 위젯 만들기
SearchScreen 위젯 완성하기

02 _ 10 추천 화면 만들기
추천 화면 기본 코드 입력하기
SatckProductltem 위젯 만들기
CardProductltem 위젯 만들기
추천 화면 완성하기

Chapter 03 모두의플레이 UI 만들어보기
03 _ 1 앱 뼈대 만들기
폴더 만들기
프로젝트 전체에서 사용할 기본 파일 만들기
pubspec.yaml 파일 설정하기
프로젝트에 사용할 아이콘 및 이미지 추가하기

03 _ 2 스플래시 화면 만들기
splash_screen.dart 파일 기본 코드 작성
profile_screens.dart 기본 코드 작성
routes.dart 파일 코드 작성
constants.dart파일 코드 작성
theme.dart 파일 코드 작성
main.dart 파일 코드 작성
splash_screen.dart 파일 작성

03 _ 3 프로필 화면 만들기
프로필 화면 기본코드 작성하기
ProfileCard와 AddCard 위젯 작성하기
프로필 화면 완성하기
MainScreens 위젯으로 이동하기

03 _ 4 메인 화면 만들기
MainScreens 위젯의 자식 위젯 만들기
bottomNavigationBar 데이터 모델 클래스 만들기
MainScreens 위젯 완성하기

03 _ 5 홈 화면 만들기
Sliver를 이용하여 고정된 앱바를 포함한 위젯 만들기
순위를 보여주는 RankPoster 위젯 만들기
반복되는 Poster 위젯 만들기
동시에 움직이는 두 개의 스크롤 뷰 만들기
BottomSheet 위젯으로 영상 정보 위젯 만들기

03 _ 6 상세정보 화면 만들기
상세정보 화면으로 이동하기
동영상 플레이어 위젯 추가하기
episode 데이터 모델 클래스 만들기
NestedScrollView로 TapBar를 화면 중간에 추가하기
TabBar의 첫 번째 View 작성하기
TabBar의 두 번째 View 작성하기

03 _ 7 공개 예정 화면 만들기
공개 예정 화면 기본코드 작성하기
동영상 플레이어 위젯 추가하기
공개 예정 화면 완성하기

03 _ 8 지정된 콘텐츠 목록 화면 만들기
이미지를 회전시켜주는 RotateImage 위젯 만들기
ContentsListScreen 완성하기