1. Flutter 숙련
Column은 위젯들을 순서대로 배치하므로 Container들이 겹칠 일이 없던 반면,
Stack은 단지 정해진 위치나 규칙 없이 위젯들을 배치만 하므로 Container들이 겹치는 것을 확인하실 수 있습니다.
따라서 Stack함수를 쓸때는 Poisoned class를 정의해줘야 한다.
Ex) right=0인 경우, 오른쪽으로부터 0px 떨어진 위치
- ClipRRect _ 네모난 모서리를 둥글게
- 만약 동그라미로 만들고 싶다면?_ width,height값의 절반값을 borderRadius: BorderRadius.circular(60)로 바꾸기만 하면 된다.
Expanded
SixedBox
——> 크기 정해줘야 됨
Spacer
-> 간격 벌려주기
# 하단에 자세히 보기 기능 구현
GestureDetector( onTap: ()
{ // 자세히 보기 터치했을 때 DetailPage로 가게 미리 구현
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return DetailPage(); }, )); },
child: Container(
width: double.infinity, height: 50,
// UX 고려한 높이
alignment: Alignment.center,
color: Colors.transparent,
child:
Text( '자세히 보기', style: TextStyle( color: Colors.blueAccent, fontWeight: FontWeight.bold, ), ),
통신의 기본은 비동기 async, await
Overflow:TextOverflow.ellipsis. - 긴 글-> ...으로 짧게 만들기
Column내 ListView는 사아즈를 갖지 않게 된다. -> Expanded로 감싸서 남은 영역을 모두. LIstView가 모두 사용하도록 한다.
#나의 언어로 번역하기
Flutter 숙련_ 블로그 앱 만들기_Firebase Firestore 사용하기
# 전체 흐름 파악
Firestore <-> PostRepository <-> ViewModel <-> View
# 학습과정을 자신의 언어로 바꿔서 이해하기
1. insert 구현 후 테스트
→ Firestore에 새로운 글(Post)을 저장(Create)하는 기능
왜?
- 블로그의 가장 기본 기능: 글쓰기
- 앱 → Firestore 로 데이터가 잘 저장되는지 확인
- 기본적인 Write → PostModel → Firestore 흐름 점검
2. 나머지 getOne, delete, update 구현
→ 각 글 조회, 삭제, 수정 기능 구현
왜?
- CRUD 완성! (Create / Read / Update / Delete)
- 글 상세보기 → 수정 or 삭제 같은 기능 넣기 위해 필수
- Firestore에서 단일 문서 조작 기능 익히기
3. HomeViewModel 구현
→ 홈 화면에서 보여줄 글 리스트를 관리하는 중간다리
왜?
- View(View 화면)는 데이터에 직접 접근하지 않음
- ViewModel이 데이터를 Repository에서 가져와서 상태를 관리
- UI는 ViewModel이 제공하는 데이터만 바라보게
4. HomeListView 수정
→ 홈화면에 글 리스트를 UI로 표시
왜?
- ViewModel이 가져온 글 목록을 화면에 그려주는 부분
- MVVM에서는 View는 오직 ViewModel의 상태만 읽고 표시함
5. DetailViewModel 구현
→ 상세 페이지용 ViewModel, 한 개의 Post 관리
왜?
- 상세화면은 하나의 포스트 데이터를 표시하고 조작해야 함
- ViewModel이 그 데이터와 로직을 다루기 때문에 필요
- 단일 Post의 상태관리, 삭제 처리 로직 포함
6. DetailPage 수정 (Post 전달 및 삭제 구현)
→ 상세 페이지 UI에서 포스트 내용 보여주고 삭제기능 연결
왜?
- 상세보기에서 글을 삭제하려면 PostModel이 필요
- ViewModel → Repository → Firestore 삭제 연결해야
- Navigator.push로 넘긴 Post를 ViewModel에 연결
7. WriteViewModel 구현
→ 글 작성 페이지의 상태와 로직 담당
왜?
- 글을 쓰는 페이지는 텍스트 필드, 저장 버튼 같은 상태 관리 필요
- ViewModel이 입력값을 PostModel로 만들어 Repository에 전달
8. WritePage 수정
→ 글쓰기 UI 구현 및 ViewModel 연결
왜?
- 사용자의 입력을 ViewModel이 받고, 저장 요청을 보냄
- 버튼 누르면 Firestore에 Post 추가되도록 연결
9. PostRepository에 snapshots 추가
→ Firestore의 실시간 데이터 스트림 기능 추가
왜?
- 글을 실시간으로 반영 (새 글 작성, 삭제, 수정 시 자동 UI 반영)
- FirebaseFirestore.collection('posts').snapshots() 사용
10. HomeViewModel 수정 (snapshots 사용)
→ 기존 get → 실시간 스트림으로 전환
왜?
- 이전에는 앱 실행 시 한번만 가져왔음
- 이제는 글이 변경되면 자동으로 감지하고 UI 업데이트
11. DetailViewModel 수정
→ 상세 화면도 실시간 데이터 반영 필요
왜?
- 삭제된 글에 접근하거나, 수정된 내용을 바로 반영하려면 실시간 동기화 필요
- 하나의 Post 문서도 .doc(id).snapshots()로 구독할 수 있음
12. DetailPage 수정
→ 수정된 DetailViewModel에 따라 UI 업데이트
왜?
- 실시간 상태를 반영하려면 화면도 ViewModel의 상태를 따라야 함
- ViewModel이 Post 변경을 감지 → UI 자동 반영 구조 완성