카테고리 없음

블로그앱 만들기 프로젝트 소개 및 UI구현 1202

daechaerohwachang 2024. 12. 2. 21:20


1 전체 구조

1.홈페이지
앱바(Text)+바디-컬럼(Text,Expanded ListView)+스캐폴드-플로팅 액션 버튼

2.포스트 내용 볼수 있는 디테일 페이지
앱바-액션즈(아이콘+아이콘)+리스트뷰(이미지+텍스트x4)

3.글쓰기 페이지
앱바(타이틀-텍스트, 액션즈-텍스트) + 리스트뷰( 텍스트필드x3)+컨테이너(아이콘)
4.글 수정 페이지 


2. 폴더구조

1. lib>
ui>data

2. data>
repository>model

3. ui>
detail-detail_page.dart-detail_view_model.dart
>home-home_page.dart-home_view_model.dart
>write-write_page.dart-write_view_model.dart
>widgets 전체 폴더에 위젯스 붙혀넣기


3.각 페이지 구성

3-1 . detail_page.dart 코드 구성

클래스 디테일 페이지 ex SLW 1MO하고 
{}안에  리턴 스캐폴드
앱바: 앱바(),
바디 : 텍스트 ('디테일페이지')

3-2 . home_page.dart 코드 구성
디테일 페이지와 동일 바디내 텍스트만 '홈페이지'로 변경

3-3. write_page.dart 코드 구성
디테일 페이지와 동일 바디내 텍스트만 '라이트페이지'로 변경

4. main페이지 구성
리턴 머테리얼 앱 밑으로 ctrl+x

홈: 홈페이지(),
터미널에서 플러터 펍 애드 플러터_리버팟

런앱- 지우고 PRVD SCP -마이앱을 감싸준다
->에뮬레이터실행

5. 홈페이지 구성 
1. 앱바 - 타이틀- 텍스트('블로그')