분류 전체보기 (657) 썸네일형 리스트형 [Flutter] Clone - 당근마켓38(Item detail & CustomScrollView) 이번에는 CustomScrollView 에 대해서 알아보겠습니다. CustomScrollView 내부에는 slivers[] 를 이용하여 화면을 구역으로 나눠서 각 구역마다 슬라이스를 구현할 수 있다. 일반적으로 slivers 내부에는 Sliver 스타일의 위젯을 넣을수 있다. SliverAppBar 는 기존 AppBar 와 유사한 기능을 하고, 일반 위젯을 사용하려면 SliverToBoxAdapter 으로 wrapping 하여 사용하면 된다. 그 외에도 많은 기능이 있으니 참고하세요. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현한 화면은 아래와 같습니다. ./src/screens/home/item_detail_page.dart - appBar 사용안하고, body 에서 C.. [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] 안드로이드 스튜디오 설정 - 자동완성 기능 추가 안드로이드 스튜디오에서 "stful" 이라고 입력하면 특정 템플릿이 자동으로 생성되는것 처럼 원하는 템플릿을 추가할 수 있다. 1. 설정에서 아래 항목을 찾아서 추가 버튼 클릭. 2. "Live Template" 선택. 3. 템플릿 추가 - 필요한 정보 추가. 4. 타겟 언어 설정 후 완료. [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.. 이전 1 ··· 53 54 55 56 57 58 59 ··· 83 다음
