Flutter (156) 썸네일형 리스트형 [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] Firestore 구조 알아보기 Concept CollectionReference add() - 새로운 document 추가 doc() - return documentReference query 생성 - .get()을 통해서 querySnapshot 리턴 snapshot() - return stream get() - return querySnapshot DocumentReference - documentReference 는 document 의 위치를 나타낸다. DocumentReference docRef = FirebaseFirestore.instance.collection('abc').doc('123'); set(data) - data 추가/갱신(id 지정 가능) update(data) - data 갱신 delete() - docum.. [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.. [Flutter] Clone - 당근마켓29(InputScreen - category 구현) 이번에는 InputScreen 의 category 부분을 getx 로 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 오늘 구현한 화면은 아래와 같습니다. 카테고리 항목을 선택후 수정할때는 이전에 선택한 항목의 색상이 변경되어 있다. 파일명 변경 user_state.dart --> user_controller.dart ./src/states/category_controller.dart - 카테고리 관리는 getx 로 구현하였습니다. index 를 이용하여 영문/한글 값을 찾고, 찾은 값을 이용하여 카테고리 정보는 영문 값으로 저장 import 'package:get/get.dart'; class CategoryController extends GetxControl.. [Flutter] Clone - 당근마켓28(InputScreen - layout/나머지 부분) 이번에는 InputScreen 의 나머지 layout 부분을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 오늘 구현한 화면은 아래와 같습니다. 단계별로 변경된 부분입니다. 오른쪽 마지막 캡쳐가 오늘의 최종버전입니다. ./src/screens/input/input_screen.dart import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:flutter_multi_formatter/flutter_multi_formatter.dart'; import 'package:get/get.dart'; import 'multi_image.. 이전 1 2 3 4 5 6 7 ··· 20 다음
