만들면서 배우는 플러터 앱 프로그래밍7가지 모바일 앱 UI 제작 & RiverPod 상태 관리 책소개

플러터 앱 프로그래밍

플러터에 관련된 책을 소개해드릴게요.

이 책을 통해서 클론코딩과 웹을 만들어 볼 수가 있어요.

https://app.ac/Lqpr7o203

만들면서 배우는 플러터 앱 프로그래밍 | 최주호 - 교보문고

최신 버전의 플러터 & Dart 핵심 문법 익힌 후 6가지 앱과 가지 웹을 제작해보고, RiverPod를 사용하여 상태 관리 방법 등 고급 기술도 자세하게 설명하였다!

이 책의 핵심 구성은 플러터 & 다트 핵심 문법을 익힌 후 스토어 앱, 레시피 앱, 프로필 앱, 로그인 앱, 쇼핑카트 앱, 모두의마켓 앱 등 6가지 모바일 앱을 만들고, 모두의숙소 웹 플러터 웹 페이지를 만들어본다. 또한 사진 관리 앱, 모두의블로그 앱, 상태 관리 앱을 만들고 RiverPod 상태 관리와 카메라를 제어해 볼 수 있다.

이 책을 통해 배우는 내용은 다음과 같다.

- 최신 버전의 플러터 & 다트 핵심 문법을 알기 쉽게 이해할 수 있다.

- 다양한 휴대폰 앱(App) UI를 만들어 본다.

- 컴포넌트화해서 제사용 가능한 위젯을 만들고, 유지보수에 용이하게 코드를 작성할 수 있다.

- 플러터로 웹(Web)을 만들어 본다.

- 유명한 어플을 클론 코딩하여 만들 수 있다.

- 카메라를 제어해볼 수 있다.

- API 서버와 JWT 인증 방식으로 통신하는 방식을 배울 수 있어요. 이를 통해 실무에서 백엔드 개발자와 협업해보는 간접 체험해 볼 수 있다.

- Riverpod를 사용하여 상태관리 방법을 배울 수 있다. 그리고 Riverpod를 사용하여 MVVM 패턴을 사용하여 앱을 효과적으로 만들어 볼 수 있다.

- 플러터의 가장 많이 사용하는 유형의 위젯만을 골라서 수록되어 있고, 가장 많이 사용되는 핵심 위젯을 모아서 공부해볼 수 있다.

​

목차

CHAPTER 01 플러터 이해하기

01_ 1 플러터란?

01_ 2 플러터의 특징

01_ 3 Dart 언어의 특징

01_ 4 지금 당장 앱을 만들어야 한다면?

01_ 5 Skia 엔진

01_ 6 AOT와 JIT 지원

01_ 7 Swift UI와 Android JetPack Compose

01- 8 플러터 아키텍처

01_ 9 플러터 버전별 차이점

​

CHAPTER 02 플러터 시작하기

02_ 1 Flutter SDK 설치하기

Flutter SDK 다운로드

Flutter SDK 압축 해제 및 폴더 설정

Flutter 환경변수 설정

02_ 2 안드로이드 스튜디오 설치하기

안드로이드 스튜디오 다운로드

안드로이드 스튜디오 설치하기

Flutter, Dart 플러그인 설치

Flutter 프로젝트 생성하기

Flutter Doctor

버전 확인 해보기

02_ 3 안드로이드 스튜디오 환경 설정

자동정렬 설정

글자 크기 및 폰트 설정

02_ 4 Flutter 에뮬레이터로 fist_app 프로젝트 실행하기

02_ 5 Hot Reload 체험해보기

​

CHAPTER 03 Dart 문법 익히기

03_ 1 DartPad 사용해보기

DartPad 사이트 접속하기

Flutter로 앱 코딩하기

순수Dart 언어 작성하기

03_ 2 Dart 변수

변수

타입 확인

타입 추론

03_ 3 연산자 알아보기

산술 연산자

비교 연산자

논리 연산자

03_ 4 조건문

if문

삼항 연산자

null 대체 연산자

03_ 5 함수

함수

익명함수와 람다식

03_ 6 클래스

클래스란?

객체(Object)란

객체 지향 프로그래밍

생성자

선택적 매개변수

cascade 연산자

03_ 7 dart null safetye

dart Null Safety 뭘까?

null check 연산자와 null 병합 연산자

null 억제 연산자 또는 null assert 연산자

late 키워드에 대해 알아 보자

03_ 8 상속

다형성

슈퍼(super) 키워드

final 키워드와 이니셜 라이져(:) 키워드

03_ 9 Mixin

03_ 10 추상 클래스

추상 클래스란?

03_ 11 컬렉션

List

Map

Set

03_ 12 반복문

for문

map 함수

where 연산자

스프레드 연산자

03_ 13 final과 const

​

CHAPTER 04 스토어 앱 만들기

04_ 1 스토어 앱 구조보기

화면 구조보기

MaterialApp vs CupertinoApp

Scaffold

필요한 위젯 살펴보기

플러터 프로젝트 생성하기

04_ 2 스토어 앱 뼈대 만들기

04_ 3 스토어 앱 만들어보기

기본 코드 작성하기

Column 위젯

Row 위젯

Text 위젯

SafeArea 위젯

Text 위젯의 Style 속성

Open Flutter Devtools

Spacer 위젯

Debug 배너 해제

Padding 위젯

Image 위젯

Expanded 위젯 - Column 방향

SizedBox 위젯

​

CHAPTER 05 레시피 앱 만들기

05_ 1 레시피 앱 구조보기

화면 구조보기

필요한 위젯 살펴보기

플러터 프로젝트 생성하기

05_ 2 레시피 앱 뼈대 구성하기

05_ 3 레시피 앱 만들어보기

기본 코드 작성하기

AppBar 위젯의 action 속성에 Icon 위젯 추가하기

RecipeTitle 커스텀 위젯 만들기

Theme에 Font 적용하기

Container 위젯을 활용한 RecipeMenu 커스텀 위젯 만들기

재사용 가능한 레시피 리스트 아이템 만들기 - 클래스 생성화 활용

ListView 위젯을 활용하여 세로 스크롤 달기

AspectRatio로 이미지 비율 정하기

ClipRRect 위젯으로 이미지 모서리에 곡선 주기

​

CHAPTER 06 프로필 앱 만들기

06_ 1 레시피 앱 구조보기

화면 구조보기

필요한 위젯 살펴보기

플러터 프로젝트 생성하기

06_ 2 프로필 앱 뼈대 구성하기

프로젝트 구조 세팅하기

기본 코드 작성하기

06_ 3 프로필 앱 위젯 구성하기

AppBar 위젯과 Scaffold의 endDrawer 속성 활용하기

CircleAvatar 위젯

Column 위젯의 CrossAxisAligment 속성 활용하기

재사용 가능한 함수 만들기

InkWell 위젯을 사용하여 ProfileButtons 클래스 만들기

TabBar 위젯과 TabBarView 위젯 사용하기

GridView 위젯과 Image.network

​

CHAPTER 07 로그인 앱 만들기

07_ 1 로그인 앱 구조 살펴보기

화면 구조보기

필요한 위젯 살펴보기

플러터 프로젝트 생성하기

07_ 2 로그인 앱 뼈대 작성하기

프로젝트 구조 세팅하기

기본 코드 작성하기 - 화면 이동을 위한 Routes

07_ 3 LoginPage 위젯 구성하기

ListView 위젯으로 전체 구성하기

SvgPicture 라이브러리로 Logo 위젯 만들기

TextFormField 위젯 만들기

Form 위젯 만들기

Form 위젯에 Theme를 적용한 TextButton 추가하기

Navigator 화면 이동하기

Form 위젯 유효성(validation) 검사하기

07_ 4 HomePage 위젯 구성하기

home_page.dart 코드 완성하기

​

CHAPTER 08 쇼핑카드 앱 만들기

08_ 1 쇼핑카트 앱 구조보기

화면 구조보기

필요한 위젯 살펴보기

플러터 프로젝트 생성하기

08_ 2 플러터 상태 관리 StatefulWidget

StatefulWidget 이란?

StatefulWidget과 StatelessWidget의 차이

위젯 트리

StatefulWidget 빌드 흐름

BuildContext 분리하기

08_ 3 쇼핑카드 앱 뼈대 작성하기

프로젝트 구조 세팅하기

기본 코드 작성하기

08_ 4 쇼핑카드 앱 만들어보기

AppBar 만들기

쇼핑카드 헤더 만들기 - setState() 함수

쇼핑카드 디테일 만들기 - Stack 위젯과 Positioned 위젯

쇼핑카드 디테일 만들기 - CupertinoAlertDialog 위젯

​

CHAPTER 09 모두의숙소 웹 만들기

09_ 1 모두의숙소 웹 구조 살펴보기

화면 구조보기

플러터 프로젝트 생성하기

09_ 2 모두의숙소 웹 뼈대 작성하기

프로젝트 구조 세팅하기

기본 코드 작성하기

09_ 3 모두의숙소 웹 만들어보기

헤더에 AppBar 만들기

헤더에 Form에 추가할 CommonFormField 만들기

헤더에 Form 만들기

바디에 Banner 만들기

바디Popular에 추가할 HomeBodyPopularltem 만들기

바디에 Popular 완성하기

MediaQuery를 활용한 HomeHeaderForm 가운데 정렬

안드로이드 에뮬레이터로 실행해보기

​

CHAPTER 10 모두의마켓 앱 만들기

10_ 1 앱 뼈대 만들기

폴더 및 파일 만들기

pubspec.yaml 파일 설정하기

main_screens.dart 기본 코드 작성

앱 테마 설정하기

main.dart 파일 완성하기

10_ 2 메인화면 만들기

MainScreens 위젯 기본 코드 작성하기

IndexedStack의 하위 위젯 만들기

MainScreens 위젯 완성하기

10 _ 3 홈 화면 만들기

AppBar 만들기

화면에 사용할 샘플 데이터 만들기

독립된 파일로 위젯 만들기

HomeScreen 위젯 완성하기

10_ 4 나의 당근 화면 만들기

나의 당근 화면 기본 코드 입력하기

나의 당근 화면 Header 위젯 만들기

모델 클래스 만들기

하단 Card 메뉴 위젯 만들기

MyCarrotScreen 위젯 완성하기

10_ 5 채팅화면 만들기

모델 클래스 및 샘플 데이터 만들기

재사용 위젯 만들기

CarttingScreen 위젯 기본 코드 입력하기

ChatContainer 위젯 만들기

CarttingsScreen 위젯 완성하기

10_ 6 동네생활 화면 만들기

모델 클래스 및 샘플 데이터 만들기

NeighborhoodLifeScreen 위젯 기본 코드 입력하기

LifeHeader 위젯 만들기

LifeBody 위젯 만들기

NeighborhoodLifeScreen 위젯 완성하기

10_ 7 내 근처 화면 만들기

모델 클래스 및 샘플 데이터 만들기

NearMeScreen 위젯 기본 코드 입력하기

TextFilleld 위젯 만들기

수평 방향으로 스크롤 되는 위젯 만들기

Wrap 위젯 사용해 보기

Storeltem 위젯 만들기

NearMeScreen 위젯 완성하기

​

CHAPTER 11 사진 관리 앱 만들기 : 카메라 제어하기

11_ 1 사진 촬영 저장 어플 만들기

플러터에서 카메라를 제어하는 방법

새로운 프로젝트 생성하기

안드로이드 권한 부여하기

minSdkVersion 설정하기

필요한 패키지 추가하기

어플리케이션 구현하기

애플리케이션에서 실행하기

11_ 2 사진 촬영 저장 및 불러오기 어플 만들기

새로운 프로젝트 생성하기

안드로이드 권한 부여하기

필요한 패키지 추가하기

어플리케이션 구현하기

애플리케이션에서 실행하기

​

CHAPTER 12 상태 관리 앱 만들기 : RiverPod

12_ 1 RiverPod 이란?

StatefulWidget vs RiverPod

12_ 2 Provider

프로젝트 실행 화면

프로젝트 생성

실습 코드 작성

12_ 3 StateNotifierProvier

프로젝트 실행 화면

프로젝트 생성

실습 코드 작성

​

CHAPTER 13 모두의 블로그 앱 만들기 : RiverPod

13_ 1 모두의 블로그 앱 구조 살펴보기

13_ 2 플러터 프로젝트 생성하기

13_ 3 서버 실행 및 테스트하기

서버 실행하기

서버 통신 테스트하기

13_ 4 PostMan 설치 및 실행하기

13_ 5 API 문서 분석하기

공통코드

회원가입

로그인

게시글 목록보기

게시글 한건보기

게시글 쓰기

게시글 수정하기

게시글 삭제하기

자동 로그인을 위한 토큰 검증하기

13_ 6 서버와 어플리케이션 연동하기

프로젝트 뼈대 만들기

dio 라이브러리 세팅하기

모델 만들기

요청과 응답의 데이터를 위한 DTO 만들기

데이터 통신을 위한 Repository 만들기

로그인 구현하기

회원가입 기능 구현하기

게시물 목록 불러오기 통신 구현하기

게시물 상세 불러오기 기능 구현하기

게시물 작성 기능 구현하기

게시물 삭제 기능 구현하기

게시물 수정 기능 구현하기

13_ 7 정리

​

출판사 서평

다양한 앱 UI를 직접 만들면서 플러터를 자연스럽게 배울 수 있다!

​

플러터 개발 환경 구축과 다트 핵심 문법 위주로 설명하여 문법에 대한 부담을 확 줄였다. 그 대신 실제 상용 앱의 UI를 클론코딩으로 직접 만들면서 자연스럽게 플러터를 배울 수 있게 과정별로 상세히 설명하였다.

​

이 책의 구성은 다음과 같다.

- Chapter 01 플러터 이해하기

플러터에 대한 전반적인 개념을 살펴본다.

- Chapter 02 플러터 시작하기

Windows에서 Flutter 개발 환경을 어떻게 구축하는지 알아보고 실행해본다.

- Chapter 03 Dart 문법 익히기

Dart 언어에서 플러터 앱 개발 시 꼭 필요한 내용 핵심 문법에 대해서 배운다.

- Chapter 04 스토어 앱 만들기

스토어 앱을 만들면서 MaterialApp, Scaffold, Column, Row, Text, SafeArea, Image, Spacer, Expanded, Padding, SizedBox 위젯에 대해서 알아본다.

- Chapter 05 레시피 앱 만들기

레시피 앱을 만들면서 AppBar, Container, Icon, ClipRRect, Container, AspectRatio, ListView 위젯과 Font 변경 방법을 배운다.

- Chapter 06 프로필 앱 만들기

프로필 앱을 만들면서 ThemeData 클래스와 TabBar, TabBarView, AppBar, InkWell, GridView, Drawer, Align 위젯과 Image위젯으로 network 이미지를 다운 받아서 화면에 표시하는 방법에 대해서 알아본다.

- Chapter 07 로그인 앱 만들기

로그인 앱을 만들면서 Form 위젯, TextFormField 위젯, Navigator 위젯을 위한 Route, Svg 위젯, 앱 전체 디자인을 위한 Theme 사용법을 배운다.

- Chapter 08 쇼핑카트 앱 만들기

쇼핑카트 앱을 만들면서 Form 위젯, TextFormField 위젯, Navigator 위젯을 위한 Route, Svg 위젯, 앱 전체 디자인을 위한 Theme 사용법을 배운다.

- Chapter 09 모두의 숙소 웹 만들기

모두의 숙소 웹을 만들면서 플러터 웹에 대해서 배운다.

- Chapter 10 모두의 마켓 앱 만들기

실제 서비스되고 있는 중고거래 모바일 앱을 벤치마킹 후 모두의 마켓 앱을 만들어본다.

- Chapter 11 사진 관리 앱 만들기_ 카메라 제어하기

사진 관리 앱을 만들면서 플러터로 카메라를 제어하여 실제 환경에서 사진을 촬영하고, 촬영한 사진을 어플리케이션에 불러오는 기능을 수행해본다.

- Chapter 12 상태 관리 앱 만들기_ RiverPod

태관리를 위한 RiverPod 라이브러리에 대해서 배워본다.

- Chapter 13 모두의 블로그 앱 만들기_ RiverPod

기본적인 서버통신 및 상태관리를 배우기 위해 RiverPod을 사용하여 상태를 관리하고 dio로 서버와 통신하는 모두의 블로그 앱을 만들어본다.

​

이 책의 실습을 진행해보면서 발생하는 오류나 궁금한 사항은 언제든지 물어볼 수 있는 커뮤니티 사이트를 운영한다. 혼자서 코딩하다 궁금하면 저자의 네이버 카페 〈〈 https://cafe.naver.com/metacoding 〉〉에서 언제든지 물어보자.

그럼 이상으로 만들면서 배우는 플러터 앱 프로그래밍7가지 모바일 앱 UI 제작 & RiverPod 상태 관리 책 소개 포스팅을 마치겠습니다.

만들면서 배우는 플러터 앱 프로그래밍7가지 모바일 앱 UI 제작 & RiverPod 상태 관리 책 소개 포스팅은 제휴마케팅이 포함되어있습니다.

#플러터, #다트, #앱프로그래밍, #클론코딩, #블로그앱, #관리앱, #사진관리앱