Flutter/12 Clone 당근마켓 (54) 썸네일형 리스트형 [Flutter] Clone - 당근마켓37(Item read & Get.arguments) 이번에는 글목록 페이지에서 더미 데이터를 실제 데이터로 변경하는 부분 및 상세 페이지 추가해보겠습니다. 글목록에서 상세페이지로 이동시, arguments 를 통해서 "아이템 키값" 을 전달하는 방법도 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현된 화면은 아래와 같습니다. ./src/repo/item_service.dart - 저장된 글목록 로딩 함수 추가 Future getItem(String itemKey) async { if (itemKey[0] == ':') { String orgItemKey = itemKey; itemKey = itemKey.substring(1); logger.d('[${orgItemKey.substring(0, 10)}...].. [Flutter] Clone - 당근마켓36(ItemModel upload - validators) 지난번에 "거래 등록" 화면에 작성한 글/이미지를 Firebase 에 업로드하는것을 구현한 이후 폼빌더 및 검증 패키지 를 이용한 데이터 유효성 검증 방법을 구현해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현된 화면 이미지는 아래와 같습니다. 이미지와 카테고리 선택에 대한 검증은 if 문으로 처리하였습니다. 필요한 패키지는 아래와 같습니다. flutter_form_builder: ^7.6.0 form_builder_validators: ^8.3.0 ./src/screens/input/input_screen.dart - 전체 코드는 "더보기" 클릭하세요 더보기 import 'dart:typed_data'; import 'package:extended_image/.. [Flutter] Clone - 당근마켓35(ItemModel upload) 이번에는 "거래 등록" 화면에 작성한 글/이미지를 Firebase 에 업로드하는것을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 화면은 아래와 같다 ./src/repo/item_service.dart - 새로운 글을 저장하는 로직 구현 import 'package:cloud_firestore/cloud_firestore.dart'; import '../constants/data_keys.dart'; import '../models/item_model.dart'; import '../utils/logger.dart'; Future createNewItem(ItemModel2 itemModel, String itemKey, String userKey) asy.. [Flutter] Clone - 당근마켓34(InputScreen - image uploading) 이번에는 image picker 에서 선택한 이미지를 Firebase Storage 에 저장하고 저장위치를 알아내는 부분을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 필요한 패키지는 아래와 같습니다. firebase_storage: ^10.3.5 패키지를 추가하고 Storage 의 Rules 부분을 수정해야 한다. 수정하지 않으면 데이터를 업로드 할 수 없다. rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } } } ./src/models/item_model.da.. [Flutter] Clone - 당근마켓33(InputScreen - image picker/Getx) 이번에는 InputScreen 의 image picker 부분을 getx 로 구현해보겠습니다. 이전에는 multi_image_select.dart 에서 구현했으나 상위 화면인 InputScreen 에서도 접근이 필요해서 getx 로 구현합니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 오늘 구현한 화면은 아래와 같습니다. refactorying 한 기능이 정상적으로 동작한다. ./src/router/locations.dart - Controller 추가 GetPage( name: '/input', page: () => const InputScreen(), transition: Transition.fadeIn, binding: BindingsBuilder((){ Get.put.. [Flutter] Clone - 당근마켓32(ItemModel) 이번에는 거래할 아이템을 등록하는 화면을 위한 데이터 모델을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox | 2020.3.1 Patch 4), flutter 3.0.1 일단 모델링만 한 상태이므로 차후에 개발중에 필요한 부분 또는 오류가 발생한 부분이 있다면 추가/수정이 있을수 있습니다. /src/models/item_model.dart 신규 생성 - 2가지 방식으로 생성했고, 둘다 테스트 예정입니다. import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:geoflutterfire/geoflutterfire.dart'; import 'dart:convert'; import '../constant.. [Flutter] Clone - 당근마켓31(InputScreen - image picker upgrade) 이번에는 선택한 이미지를 삭제할때 매번 FutureBuilder 를 통해서 이미지를 XFile -> Uint8List 로 변경해서 화면에 보여지기때문에 생기는 화면 딜레이 부분을 최적화 해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox | 2020.3.1 Patch 4), flutter 3.0.1 최적화의 핵심은 언제 이미지를 XFile -> Uint8List 변경하는지 입니다. 현재는 화면에 표시할때 변환하지만, 이미지를 로딩할때로 변환 시점을 변경하면 이미지 삭제할때 딜레이 없이 바로 삭제가 가능합니다. ./src/screens/input/multi_image_select.dart - 이미지 컨버팅 시점을 변경하였습니다. 핵심 키워드(XFile.readAsBytes) - .. [Flutter] Clone - 당근마켓30(InputScreen - image picker 구현) 이번에는 InputScreen 의 image picker 부분을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 오늘 구현한 화면은 아래와 같습니다. 첫번째 이미지 - 이전에 구현한 더미 이미지 layout 두번째 이미지 - image picker 구현후 layout 첫번째 이미지 - image picker 로 사진을 선택후 layout 사용한 패키지는 image_picker: ^0.8.5+3 ./src/screens/input/multi_image_select.dart import 'dart:typed_data'; import 'package:extended_image/extended_image.dart'; import 'package:flutter/materi.. 이전 1 2 3 4 5 6 7 다음
