Flutter/12 Clone 당근마켓 (54) 썸네일형 리스트형 [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() 추가.. [Flutter] Clone - 당근마켓24(fixing Getx router error) 이번에는 getx routing 관련 개인적으로 경험한 오류/문제에 대해서 개인적인 해결 방법을 정리했습니다. 먼저 어플이 시작되는 순서를 정리해보았습니다. 순서는 아래와 같습니다. 1. 3초 동안 SplashScreen 화면이 보이고 3초 이후에는 AppleApp() 로 이동 2. AppleApp() 에서 UserController 객체 생성 및 listen 등록( FirebaseAuth.instance.authStateChanges().listen((user) {} ) UserController 클래스 정보는 "더보기" 참고. 더보기 class UserController extends GetxController { static UserController get to => Get.find(); fina.. [Flutter] Clone - 당근마켓23(ExpandableFab) 이번에는 floatingActionButton 을 확장하는 ExpandableFab 기능을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구성은 아래와 같습니다. ./src/screens/home/home_screen.dart - Scaffold 하위에 floatingActionButton 관련 추가 floatingActionButton: ExpandableFab( // distance between button and children, distance: 90, children: [ MaterialButton( onPressed: () {}, shape: const CircleBorder(), height: 48, color: Theme.of(context.. [Flutter] Clone - 당근마켓22(userModel 구현) 이번에는 사용자 정보(userModel)를 실제 쓰고, 읽기를 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 ./src/repo/user_service.dart import 'package:cloud_firestore/cloud_firestore.dart'; import '../constants/data_keys.dart'; import '../models/user_model.dart'; class UserService { // 싱글톤 디자인 패턴 *************************************** // 인스턴스가 한번만 생성되고, 2번째 생성시에는 처음 생성한 인스턴스를 리턴, static final UserService _userServi.. 이전 1 2 3 4 5 6 7 다음
