본문 바로가기

분류 전체보기

 (657)
[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..
[Flutter] Clone - 당근마켓27(InputScreen - layout/제거버튼) 이번에는 InputScreen 에서 이미지 제거용 버튼을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 오늘 구현한 화면은 아래와 같습니다. 단계별로 변경된 부분입니다. 오른쪽 마지막 캡쳐가 오늘의 최종버전입니다. ./src/screens/input/multi_image_select.dart - Stack 으로 wrapping 후, Positioned & IconButton 으로 구현. ...List.generate( 20, // Wrapping by Stack (index) => Stack( children: [ Padding( // 패딩 - 위에서 전체를 16으로 처리해서 여기서는 위/아래/오른쪽만 16 처리할 것, padding: const EdgeInse..
[Flutter] Clone - 당근마켓26(InputScreen - layout/사진추가) 이번에는 InputScreen 에 필요한 layout 을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 오늘 구현한 화면은 아래와 같습니다. 단계별로 변경된 부분입니다. 오른쪽 마지막 캡쳐가 오늘의 최종버전입니다. ./src/screens/input/multi_image_select.dart - 상단의 사진 관련 부분 구현 import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import '../../constants/common_size.dart'; class MultiImageSelect extends StatefulWidget { const Mu..
[Flutter] Clone - 당근마켓25(InputScreen) 이번에는 새로운 스크린 추가 및 라우팅 추가에 대해 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 초기 화면은 아래와 같습니다. 새로운 페이지가 추가되면 getPages() 에 해당 정보를 추가해주면 된다. ./src/router/locations.dart GetPage( name: '/input', page: () => const InputScreen(), transition: Transition.fadeIn, middlewares: [CheckAuth()], // 미들웨어를 먼저 확인(로그인 여부 확인)하고 "page:" 로 이동함 ), ./src/screens/home/home_screen.dart - 새로운 화면으로 이동하는 Get.toNamed() 추가..

티스토리툴바