Codelabs

Flutter 레이아웃 기본 개념

DartPad를 사용하여 브라우저에서 (Flutter와 Dart를 다운받지 않아도 됩니다!) 기본적인 Flutter 레이아웃을 만드는 방법을 배우세요.

첫 Flutter 앱 만들기, part 1

새로 시작하는 스타트업의 이름을 지어줄 간단한 모바일 앱을 만들어보세요. part 1에서는 무작위로 단어 쌍을 뽑아 무한히 스크롤 할 수 있는 리스트에 넣는 패키지를 이용합니다.

첫 Flutter 앱 만들기, part 2

새로 시작하는 스타트업의 이름을 지어줄 간단한 모바일 앱을 만들어보세요. part 2에서는 part 1에서 만든 앱을 발전시켜 봅니다. 사용자가 좋아하는 단어 쌍을 선택할 수 있도록 하고, 좋아하는 단어쌍들을 모아둔 “Saved Favorites” 페이지를 추가합니다. 마지막으로 앱의 테마 색상도 변경합니다.

아름다운 UI를 가진 Flutter 앱 만들기

“첫 Flutter 앱 만들기” 보다 한층 더 깊게 들어갑니다. 이 코드랩에선 iOS와 Android에 따라 다르게 표현되는 UI와 함께 간단한 애니메이션이 있는 대화방을 만들어봅니다.

Flutter App에 구글 지도 추가하기

앱에서 구글 지도를 표시하고, 웹 서비스에서 데이터를 가져와, 데이터를 지도에 마커로 표시하세요.

구글 사진과 Flutter로 사진 공유 앱 만들기

구성원들끼리 사진을 공유할 수 있는 여행 앱을 만들어요.

Flutter로 쿠퍼티 앱을 만들기

Shrine 쇼핑 앱(머티리얼 디자인 코드랩에서 했던)을 쿠퍼티노 페키지를 사용하여 iOS 스타일로 만들어봅니다. 여러 탭과 네비게이션을 만들 것입니다. provider 패키지를 사용하여 화면 사이에 상태를 관리합니다.

Flutter를 위한 Firebase

Flutter 앱과 Firebase 데이터베이스를 연결하는 방법과 실시간으로 정보를 갱신하기 위한 트랜잭션의 사용법을 배워봅니다.

MDC 101 Flutter: Material Components (MDC) Basics

핵심 컴포넌트로 만든 간단한 앱과 함께 머티리얼 컴포넌트의 기본 사용법을 배워보세요. 총 4개의 MDC 코드랩에서는 Shrine이라는 e-commerce 앱을 만듭니다. 몇 가지의 MDC Flutter Components와 함께 로그인 페이지부터 시작합니다.

MDC 102 Flutter: Material Structure and Layout

Flutter에서 구조와 레이아웃을 위한 머티리얼 사용법을 배워봅니다. MDC101에서 만든 e-commerce 앱에 네비게이션과 구조 그리고 데이터를 추가합니다.

MDC 103 Flutter: Material Theming with Color, Shape, Elevation, and Type

Flutter에서 머티리얼 컴포넌트가 어떠한 방식으로 쉽게 제품을 차별화하고 브랜드 디자인을 표현하는지 알아보세요. 이전에 만든 e-commerce 앱에 제품을 보여주는 홈 스크린을 추가합니다.

MDC 104 Flutter: Material Advanced Components

디자인을 더 멋지게 만들고, 고급 구성 요소인 백드롭 메뉴를 사용하는 방법을 알아보세요. 선택한 카테고리로 제품을 필터링하는 백드롭 메뉴를 추가하고 나만의 e-commerce 앱을 완성하세요.


참여할 수 있는 모든 Flutter 코드랩은 Google DevelopersFlutter category에서 보실 수 있습니다. 앞에 있는 링크가 작동하지 않는다면 this mirror of the Flutter codelabs를 이용해보세요.

Dart 위주의 코드랩은 dartlang.orgcodelabs에서 보실 수 있습니다.

Other resources