12월 3주차 Flutter 기초 개인과제를 시작!!
좀 더 플로터를 즐겁게 이해하고, 천천히 내 속도대로 코딩과 친해져봐야겠다.
구현해야 할 To Do App 페이지 예제)
❓ To Do 앱의 용도와 목적은?
- 내가 해야되는 일들의 일정을 정리하는 용도
- 그날 세운 계획과 목표를 이룰 것을 정리를 하고 쉬운 확인을 목적
[ 앱의 특징 분석 ]
- 일정을 추가하면 리스트가 화면에 새로 생성되서 쌓이는 구조
- 텍스트 위주로 사용하는 기능이 구현되어 있다.
- 홈 화면에 +버튼으로 쉽게 일정 추가가 가능하다.
⭐️ 기초 챕터의 핵심 키워드
‘위젯과 친해지기’와 ‘화면 만들기(UI 구현)’
❗️ 앱 개발에서 중요한 것!
- 안정성(예외처리)
- 사용성(UX) UI와 함께 따라오는 것
[ 오늘의 목표 🧡 To Do App 기본화면 까지 만들기 ]
🔅 1. 레이아웃 나누기
► 디자이너에게 레이아웃 디자인 페이지 자료를 받았다고 생각을 해보자!
내가 해야 될 것:
UI 명세서와 앱 화면 flow를 보고 정확하게 레이아웃을 설계해야 한다.
Text, Image, Icon, Button 등 widget을 사용해 화면을 구성해야 한다.
(실무처럼 피그마에 얹어놓고 레이아웃 분석한 이미지 첨부)
(안정성/사용성 중요!! 안정성은 예외처리로 가능!!!! 사용성은?)
(UX =사용성에 대해서도 고민해보자)
[ 필수조건 ]
- 아이콘, 텍스트 위젯, 버튼 위젯 등을 활용하여 화면을 구성해야 한다.
- ListView(스크롤 위젯)로 화면 요소들을 표현한다.
(Row, Column, ListView 레이아웃을 구성하는 위젯) - 버튼 기능을 통해 다른 페이지로 이동할 수 있어야 한다.
[ 필수 변수 ]
final String title;
-> AppBar 부분의 title이 'To Do 세부 화면'에서 다르다. 2가지
final String? description;
->
final bool isFavorite;
->
final bool isDone;
->[ 레이아웃 분석 ]
앱 오픈 시, 홈 화면 & To Do 가 없을 때
내가 생각한 구조!
현재 페이지 HomePage
Scaffold구조
- AppBar
- Text
- body
- Widjet
- Container
- Icon
- Text
- Text
- Text
- bottom
- Container
- Icon🌱 2. Flutter 코드 작성
1. Git에 과정을 저장할 repository 생성하기-'Flutter-tasks'(링크 상단)
2. Flutter에 파일 생성하기
프로젝트 명: tasks
폴더 생성: 초기 화면 HomePage
To Do 상세 내역 화면: ToDoDetailPage
1. lib 폴더에 main.dart파일이 있고,
- 상위폴더인 page폴더를 생성한 뒤, home폴더를 생성. 그 안에 home_page.dart파일을 넣어준다.
- home폴더 안에 widgets폴더를 만들어서 wiget파일들을 담아준다.
2. 과제 조건! To Do Entity Class 만들기
- entity폴더를 생성해서 Class를 따로 만들어준다.
- To Do Entity 기능이란?-
사용자가 작업관리 시스템 내에서 할 일(To-Do) 항목을 독립적인 개체(Entity)로 취급하고 관리하는 기능이다.
-
데이터베이스 설계 또는 작업관리 애플리케이션에서 사용!
-> 단순히 목록에 텍스트를 추가하는 것을 넘어서 할 일 항목을 구조화 된 데이터로 관리하여 상호운용, 추적 가능, 다른 시스템과의 통합을 가능하게 하는 핵심 기능이다!
-
[ 코드 짜는 법! ]
- Scaffold 안에서 작업
- 완성되면 위젯클래스로 분리
- 위젯클래스를 별도의 파일로 분리
- Scaffold에 위젯 배치
- 변경되어야 하는 부분들 속성으로 정의해서 수정!
🌿 3. README
📝 1) Flutter project-To Do App
사용자가 할 일을 관리할 수 있는 심플한 플러터 애플리케이션입니다.
✨ 2) 주요 기능
- 할 일 추가: 플로팅 버튼을 눌러 새로운 할 일을 등록
- 배경 커스텀: 테마 모드에 따른 다크/라이트 모드 지원
- 진행 추적: ListView를 통한 직관적인 할 일 목록 관리
🚀 3) github 제작과정
https://github.com/joohyelim1208/Flutter-tasks.git
🌳 4. 트러블 슈팅
251222 월요일 TIL
🔽 [ 상황 발생 ]
비슷한 문제가 계속 발생하고 있다. appBarTitle클래스의 파라미터를 HomePage클래스로 가져와야 하는데 적용이 되질 않는다.
🔽 [ 원인 분석 ]
왜 이런 상황이 생겼을까?
appBarTitle클래스의 구조는 잘 짜여졌다고 생각하는데 title을 불러오는 것이 안된다.
어떻게 대응하면 좋을까?
appBarTitle을 대문자로 시작하도록 변경했어야 했다!
-> AppBarTitle클래스
그리고 implements PreferredSizeWidget를 추가해서 인터페이스를 구현해야 한다고 한다..
🔽 [ 해결 방안 ]
title: Text(title,),로 변수를 적용시킨 뒤,
homrPage에 파라미터를 가져와서 적용시켰다.
- 한가지 더
PreferredSizeWidget은 preferredSize라는 높이 정보를 반드시 제공하지 않으면 작동을 안 한다!!
이 부분은 잘 모르는 부분이고 서치를 통해 알아냈다.
🔽 [ 결과 ]
문제 해결
하단의 body부분 text에서도 title 파라미터를 정상적으로 받아와서 잘 출력이 되는 모습이다.
🔽 [ 배운점 ]
implements PreferredSizeWidget은 '구현' 부분이며,
AppBar를 별도로 Class 파일로 분리했을 때 무조건 써줘야 한다!
- size라는 클래스를 리턴하는 것
- 위젯의 높이를 반드시 설정해줘야 함. 48~60 사이 값을 보통 쓴다.
class AppBarTitle extends StatelessWidget implements PreferredSizeWidget {
const AppBarTitle({super.key, required this.title});
final String title;
Size get preferredSize => const Size.fromHeight(56);
Widget build(BuildContext context) {
return AppBar(),
}
}🔽 [ 나만의 코드 ]
나중에 구현해보고 싶은 기능
appBar에서
PreferredSizeWidget 을 사용하면 높이 외에도 다양한 설정들을 적용 가능한데 적극 활용해보고 싶다!
251218 TIL
오늘은 개인적인 일들을 처리하느라 개인과제를 많이 진행하지 못했다..
그래도 앱을 구성하는데 가장 많은 도움이 되었던건 강의 예제 2번 레시피 앱을 만들어 보면서 구조가 흡사해서 많은 참고를 하였다.
아직 어려운 점:
과제에서 제시하는 조건들에 맞춰서 어떻게 구상을 해야할지 아직 많이 버벅이고 있다.
만약 잘 할 수 있다면 내일은 4번 조건 ToDo까지 추가해보고 싶다.
