굿위시18 [굿위시 제작기] 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. [굿위시 제작기] 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. [굿위시 제작기] 2. 피그마 UI 설계 및 발표 피그마로 UI 제작발표 기획서에는 간단한 디자인 시안이 필요했습니다.저는 Figma를 이용해서 UI를 잡고, 이걸 가지고 발표를 하면 좋겠다는 판단을 했습니다. 피그마 링크 : https://www.figma.com/design/04WCIO0JOg9AZ6CIox6EIt/%EA%B5%BF%EC%A6%88%EC%A7%80%EA%B0%91?node-id=0-1&t=pH7PQhlG0SSEzA7K-1 FigmaCreated with Figmawww.figma.com 누구든 위 사이트를 통해서 직접 확인할 수 있습니다. 홈화면 - 굿즈 관리화면일단 굿즈 관리 앱 답게, 메인을 굿즈관리 페이지로 두었습니다. 메인 디자인은 애플뮤직의 디자인에서 아이디어를 가져왔고, 추가적으로 굿즈를 클릭하면 볼 수 있는 굿즈.. 2024. 8. 19. [굿위시 제작기] 1. Flutter 과제로 시작된 굿즈 관리 앱 과제 제작에서 시작된 굿위시때는 2024년 4월, [모바일프로그래밍] 과정을 대학교에서 수강하던 중, 중간고사 고지로 위와 같은 안내문을 받습니다. 기말 프로젝트로 수행할 자신만의 앱을 기획한다. 간단한 메모장 앱을 만들어도 충분하다고 하셨지만, 4학년이기도 하고 포폴로 쓰기도 좋으며, 이참에 출시까지 염두에 둔 나만의 앱을 하나 만들면 좋겠다는 생각이 들었습니다. 그렇게 깊은 고민의 단계에 빠집니다. 기후운동 앱부터 플랫폼 앱까지 다양하게 고민하고 프로토타입을 만들어봤지만 뭔가 마음이 계속 끌리지 않았습니다. 이미 있는 앱이기도 했고, 다른 사용자들의 관심을 끌기 힘들다고 판단이 들기도 했습니다. 그러던 중,온갖 굿즈들을 수집하던 상황에서, 내가 굿즈들을 언제 어디서 얼마에 샀는지, 어디에 뒀는지를.. 2024. 8. 16. 이전 1 2 다음
