본문 바로가기

분류 전체보기

(657)
[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..
[Flutter] Clone - 당근마켓21(userModel) 이번에는 Firebase 에 저장할 사용자 정보(userModel)에 대한 모델링을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 모델링을 할때, 저는 2가지 방법을 비교해보고 진행합니다. 첫번째는 " https://app.quicktype.io/" 사이트를 이용하는 방법. 두번째는 안드로이드 스튜디오의 플러그인 "Json to Dart" 입니다. 선호하는 방식은 첫번째 입니다. 첫번째 방식은 아래 링크 설명을 참고하세요 2022.06.30 - [Flutter/04 Widgets] - [Flutter] Widgets - Google map 2 [Flutter] Widgets - Google map 2 이번 카테고리는 google map 을 사용하는 방법에 대해서..
[Flutter] Clone - 당근마켓20(Firestore database) 이번에는 Firebase 에 대한 설정과 간단한 데이터 create, read 에 대해서 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 Firestore 생성을 위한 준비 - production mode 로 생성 시작 지역 선택 - us 지역이 가장 저렴해서 선택함. 진행중 룰 변경 초기 룰 - 읽고 쓰기를 할 수 없는 상태임 새로운 룰 생성 - Firebase 를 통해서 로그인 인증을 받으면 Firestore 에 읽고, 쓰고가 가능해 진다. CRUD 관련 추가적인 샘플코드는 아래 링크를 참고하세요. 2021.02.03 - [Flutter] - [Flutter] CRUD with FirebaseFirestore & FirebaseStorage [Flutter] ..
[Flutter] Clone - 당근마켓19(Shimmer) 이번에는 데이터가 로딩될때 인디케이터 방식 대신 Shimmer 를 이용하여 로딩시 대기 화면을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구성은 아래와 같습니다. 필요한 패키지는 아래와 같습니다. shimmer: ^2.0.0 ./src/screens/home/items_page.dart 에 shimmer 및 SizeTransition 구현 FutureBuilder 를 이용하여 5초동안 shimmer 가 보여지고 이후에는 정상 데이터가 보여진다. shimmer 가 보여지는 동안 animationController 를 이용하여 일부 컨테이너의 사이즈를 가변 시켰다. // 메인 build 에 _shimmerListView 추가. @override Widget..
[Flutter] Design Pattern - MVC, MVVM with GetX, Provider 이번에는 Getx 와 Provider 를 이용하여 MVVM 을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 GetX 로 구현한 샘플입니다. // mvvm_getx_controller.dart import 'package:get/get.dart'; import '../model/model.dart'; class MVVMGetXController extends GetxController { late Model model; RxInt count = 0.obs; @override void onInit() { super.onInit(); model = Model(); } void incrementCounter() { model.incrementCounter(); // ..
[Flutter] Design Pattern - MVC, MVVM 이번에는 MVC 와 MVVM 에 대해서 알아보겠습니다. 기본 개념을 아신다는 전제하에 MVC -> MVVM 으로 변경하는 장점을 중심으로 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면은 아래와 같습니다. +버튼은 숫자를 증가시키고, -버튼은 숫자를 감소 시킨다. 패턴을 적용하지않는 일반적인 코드 - flutter 에서 신규 프로젝트 샘플과 유사한 구조, 변수/함수/View 모두 하나의 파일에서 구현하여 간단한 화면 같은 경우, 쉽게 이해할 수 있으나 화면 및 데이터가 복잡해 경우 적합하지 않다. import 'package:flutter/material.dart'; class NoPatternView extends StatefulWidget { const N..