[Flutter] 플러터 벼락치기⚡ (일기 앱 만들기)

Develop/Flutter

[Flutter] 플러터 벼락치기⚡ (일기 앱 만들기)

마크투비 2021. 12. 29. 22:10

플러터 벼락치기⚡

0. 개요

1. Flutter 개발환경 세팅

2. Flutter 프로젝트 생성

3. Flutter 기본 개념 공부

4. Flutter 연습하기(간단한 투두앱 만들기)

5. 다이어리 앱 만들기(실전)

0. 개요

📍 기간

2021-12-29 ~ 2022-01-12 (2주)

📍 현재 나의 상황

플러터 경험 X
리액트 네이티브로 투두 앱 개발 경험 1회 (DB 사용 안 함)
인공지능 프로젝트에서 다이어리 앱 개발 클라이언트를 맡음
짧은 시간 안에 플러터 개발 공부를 하고 플젝을 완성시켜야 함

📍 계획

일단 유튜브 코딩셰프의 플러터 강의 조금 순한맛을 빠르게 수강하고, 간단한 투두앱을 클론코딩해서 플러터란 아이를 알아갈 생각이다. 모든 과정을 이 포스트에 기록할 것이고, 각 목차마다 링크를 삽입하겠다.

📍 Github

📝 다이어리 앱 프론트 이곳에서 결과물을 확인할 수 있다.

🎯 다트 문법

✅ 간단한 투두 (메인 화면에서 투두 아이템 추가)

✅ 투두 (메인 화면과 투두 아이템 추가 화면 분리)

1. Flutter 개발환경 세팅

유튜브 코딩셰프의 플러터 강의 조금 순한맛의 1강을 참고

2. Flutter 프로젝트 생성

유튜브 코딩셰프의 플러터 강의 조금 순한맛의 1강을 참고

3. Flutter 기본 개념 공부

플러터는 모든 것이 위젯으로 구성되어 있음

🎈 widget의 종류

1) Stateless widget

이전 상호작용의 어떠한 값도 저장하지 않음
상태가 없는 정적인 위젯
스크린 상에 존재만 할 뿐 아무것도 하지 않음
어떠한 실시간 데이터도 저장하지 않음
어떤 변화(모양, 상태)를 유발시키는 value 값을 가지지 않음

2) Stateful widget

value 값을 지속적으로 추적, 보존
계속 움직임이나 변화가 있는 위젯
사용자의 interaction에 따라서 모양이 바뀜
데이터를 받게 되었을 때도 모양이 바뀜

🎈 Flutter widget tree

widget들은 tree 구조로 정리될 수 있음
한 widget 내에 얼마든지 다른 widget들이 포함될 수 있음
widget은 부모 위젯과 자식 위젯으로 구성
parent widget을 widget container라고 부르기도 함

🎈 Class and Widget

프로그래밍 상에서의 클래스란?
- 객체가 가져야 하는 속성과 기능을 정의한 내용을 담고 있는 설계도 역할

프로그래밍 상에서의 객체란?
- 클래스가 정의된 후 메모리상에 할당되었을 때 이를 객체라고 함

프로그래밍 상에서 인스턴스란?
- 클래스를 기반으로 생성됨
- 클래스의 속성과 기능을 똑같이 가지고 있고 프로그래밍 상에서 사용되는 대상

Flutter의 기본 위젯들은 모두 클래스를 통해 생성된 생성자들
위젯을 일반적으로 클래스라고 얘기하지만, 엄밀하게는 생성자가 맞음

4. Flutter 앱 만들기1

🎈 Flutter 프로젝트 폴더의 구성

pubspec.yaml
- 프로젝트의 메타 데이터를 저장하고 관리
lib/main.dart

🎈 클래스명과 함수명

함수명
- 주로 소문자로 시작
- main(), runApp()

클래스명
- 주로 대문자로 시작
- MyApp()

🎈 앱바 메뉴 아이콘 (App bar icon button)

leading: 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때
actions: 복수의 아이콘 버튼 등을 오른쪽에 배치할 때
onPressed: 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의

🎈 Navigator

1) Route의 개념

Flutter에서 Route는 스마트폰에서 보여지는 하나의 화면, 페이지를 의미

2) Navigator의 정의와 push, pop 함수, stack 자료구조

3) MaterialPageRoute 위젯과 context

4) 페이지 이동 기능 구현 완성

다른 라이브러리

https://hee-jobs.tistory.com/7

https://www.youtube.com/watch?v=AR-9ArLSiNY

https://pub.dev/packages/table_calendar

https://github.com/lohanidamodar/flutter_calendar/blob/master/lib/main.dart

💢 이슈

https://github.com/aleksanderwozniak/table_calendar/issues/153#issuecomment-772881560

Undefined class 'CalendarController'. Try changing the name to the name of an existing class, or creating a class with the name

🎈 아이템 추가 기능 (add item to list)

https://dalgonakit.tistory.com/104

https://googleflutter.com/flutter-add-item-to-listview-dynamically/

저작자표시

'Develop > Flutter' 카테고리의 다른 글

[Flutter] Error: The await expression can only be used in an async function. (Solved) (0)	2022.01.14
[Flutter] editMode 추가하기 (0)	2022.01.10

현재글[Flutter] 플러터 벼락치기⚡ (일기 앱 만들기)

마크투비의 고 GO