개발일지/GoodWishes21 [굿위시 제작기] 11. 굿즈 추가 페이지 제작과정 - 굿즈와 위시 변경 버튼 굿즈 위시 모드 변경하기굿즈 추가 페이지의 상단을 보면, [GoodsList | WishList] 버튼이 있습니다.굿즈 추가 페이지를 통해, GoodsList와 WishList를 작성할 수 있는 기능을 구현하기 위해 이 버튼을 만들었습니다. 버튼을 누르면 GoodsListProvider와 연결되어서 굿즈 정보를 추가하거나, WishListProvider와 연결되어서 위시 정보를 추가할 수 있게 만드는 것이 목표입니다. AddGoodsPage의 코드 분석import 'package:flutter/material.dart';import 'package:goodwishes/constants/ui_numbers.dart';import 'package:goodwishes/widgets/goods.. 2024. 10. 31. [굿위시 제작기] 10. 굿즈 추가 페이지 제작과정 - TextInput 그리고 굿즈 등록 버튼 굿즈 분류(카테고리)의 나머지 state들[굿즈 추가 페이지 소스코드 주소 : https://arnopark.tistory.com/917#%EC%84%A0%ED%83%9D%EC%A7%80-%EC%A0%95%EB%8B%B5-2] 설정이 까다로운 date, category state는 전편에서 전부 다뤘으니, 이제 나머지 states만 다루면 됩니다. TextInput 위젯페이지 소스코드를 확인해보면, AddGoodsListEl위젯과, 그 안에 담긴 TextInput 위젯들이 눈에 들어옵니다. 이 위젯들은 구조가 이렇게 생겼습니다.그런데 어떤 건 hintText가 있는 반면, 어떤 건 이미 초기값으로 '0'이 주어진 경우가 있습니다. TextInput위젯은 직접 제작한 커스텀 위젯으로,.. 2024. 10. 19. [굿위시 제작기] 9. 굿즈 추가 페이지 제작과정 - 카테고리 설정/관리 페이지 굿즈 분류(카테고리) 기록 state굿즈 추가 페이지의 state 중에는 category가 있습니다.굿즈를 유저가 직접 설정한 카테고리로 분류하는 부분입니다. [굿즈 추가 페이지 소스코드 주소 : https://arnopark.tistory.com/917#%EC%84%A0%ED%83%9D%EC%A7%80-%EC%A0%95%EB%8B%B5-2] 굿즈 추가 페이지에서, 사진의 부분을 담당하고 있습니다.Tag()라는 커스텀 위젯을 사용하고 있는데, 현재 Category state로 지정된 값을 Text() 위젯으로 출력하며,Tag()를 누르면 카테고리 관리 페이지로 이동하는 onNavigate 속성을 전달받습니다. 태그 버튼을 누르면 카테고리 관리 페이지로 Future categoryBut.. 2024. 10. 19. [굿위시 제작기] 8. 굿즈 추가 페이지 제작과정 - DatePicker 사용하기 굿즈 날짜 기록 state굿즈 추가 페이지의 state 중에는 date가 있습니다.굿즈를 획득한 시점을 기록하는 부분입니다. Flutter에서는 날짜에 대해 DateTime이라는 class를 제공하고 있습니다.덕분에 쉽게 날짜를 출력할 수 있지만, 유저가 직접 날짜를 지정하는 기능을 만들 필요가 있습니다. DatePicker 위젯[굿즈 추가 페이지 소스코드 주소 : https://arnopark.tistory.com/917#%EC%84%A0%ED%83%9D%EC%A7%80-%EC%A0%95%EB%8B%B5-2] 위젯 중에는 굿즈 구매 일자를 등록할 수 있는 항목이 있습니다.AddGoodsListEl 위젯은 leftText, rightWidget을 전달받는데, rigthWidget에 DateP.. 2024. 10. 17. [굿위시 제작기] 7. 굿즈 추가 페이지 제작과정 - 도면, 초기세팅, 사진추가 기능 굿즈를 추가할 수 있는 페이지가 필요하다바텀 내비게이션바의 '추가' 버튼을 누르면 나오는 페이지이자, 굿즈 정보를 추가할 수 있는 기능이 포함된 페이지가 필요합니다. 지금부터 굿즈 추가 페이지를 만드는 과정에 대해 알아보겠습니다.굿즈 추가 페이지는 다른 페이지와 다르게 많은 기능 구현 과정이 포함됩니다. 따라서, 여러 단계로 글을 나눠서 작성을 하겠습니다. 페이지 디자인굿즈나 위시리스트에 들어갈 굿즈의 정보를 자세하게 입력하고 저장하는 기능을 담당합니다. 제작 결과물아이폰 15프로를 기준으로 출력된 모습입니다. 페이지 소스코드import 'package:flutter/material.dart';import 'package:goodwishes/constants/ui_numbers.dart';i.. 2024. 9. 24. [굿위시 제작기] 6. 굿즈 상세 페이지 제작하기 굿즈의 상세한 정보를 보여주는 페이지를 만들자저번에 만든 굿즈 메인페이지의 굿즈를 클릭하면, 그 굿즈에 대해서 정확하게 보여주는 페이지가 필요합니다.지금부터 그 페이지를 만들겠습니다. 페이지 디자인굿즈의 내부 정보랑, 같은 카테고리에 포함된 다른 굿즈들을 보여주는 것을 목표로 디자인을 했습니다. 이후 코딩과정에서 두 가지 변경사항이 생겼습니다.1. 태그기능은 넣지 않고, 카테고리(분류)만 일단 넣자.2. '같은 카테고리의 물건들' 항목은 앱의 안정성을 더 키운 이후에 업데이트하자 제작 결과물아이폰 15프로를 기준으로 출력된 모습입니다. 페이지 소스코드import 'package:flutter/material.dart';import 'package:goodwishes/Models/goods_m.. 2024. 9. 17. [굿위시 제작기] 5. 바텀 내비게이션 제작하기 바텀 내비게이션 - 모바일UI의 대표적인 내비게이션 바많은 모바일 앱들을 살펴보면, 대부분이 화면 하단에 내비게이션 바를 설치해놨습니다.마치 윈도우의 작업표시줄이나, Mac의 Dock처럼, 많은 UI가 화면 하단을 이용해서 다른 페이지나 프로그램으로 들어가는 것을 유도하고 있습니다.그렇기에 사용자들에게도 바텀 내비게이션은 아주 익숙한 UI이고, 굿위시 또한 바텀 내비게이션을 채택했습니다. 제작 결과물 Scaffold 위젯의 속성 : bottomNavigationBarMaterialApp( debugShowCheckedModeBanner: false, // 디버그 표시를 없앤다. home: DefaultTabController( animationDuration: Dur.. 2024. 9. 4. [굿위시 제작기] 4. 굿즈 메인 페이지 제작하기 페이지 디자인 의도피그마에서 위와 같은 디자인을 만들었습니다. 사실 이 디자인은애플뮤직의 UI를 대부분 갖고 온 것입니다.그러다보니 안드로이드 폰을 쓰는 친구들에게는 생소한 느낌이라는 이야기를 많이 들었고, 아이폰 유저이면서 특히 애플뮤직 유저인 친구들에게는 애플뮤직 갖다 썼다는 소리를 들었습니다. 제가 보기에는 애플 뮤직의 디자인이 본 앱에 꽤 어울린다는 생각이 들어서, 위처럼 제작하고자 했습니다. 제작 결과물제법 무난하게 제작됐습니다. 상단 : TopWithProfile화면 최상단에 페이지의 이름과 프로필 이미지가 나오는 부분입니다.왼쪽은 그냥 페이지에 따라 페이지 이름이 나오게 끔 만들었고, 오른쪽 프로필 아이콘버튼을 누르면 계정관리 페이지로 넘어가는 구조입니다. SizedBox( .. 2024. 8. 27. [굿위시 제작기] 3. 굿즈, 위시, 카테고리 Class(모델)를 선언하기 코딩 진입하기이제 본격적으로 Dart & Flutter 코딩에 들어갑니다.프로젝트 파일을 생성한 후 가장 먼저, 이 앱에 사용할 데이터 모델들을 정리합니다. 필요한 데이터 모델당장 기능 구현에 필요한 데이터 모델은 4가지가 있습니다. 1. Goods : 굿즈 리스트를 담을 모델2. Wish : 위시 리스트를 담을 모델3. Category : 굿즈와 위시의 카테고리를 담을 모델4. Profile : 프로필 데이터를 담을 모델 위 4개의 모델을 선언하고 관리하는 방식으로 앱의 데이터를 관리합니다. 첫 번째 Class : Goods Goods 정보를 저장할 수 있는 Class 입니다. String id : 식별자 dynamic thumbnail : 굿즈 사진 String goodsName : 굿즈 이름.. 2024. 8. 23. 이전 1 2 3 다음
