Flutter/12 Clone 'Used Goods app' (54) 썸네일형 리스트형 [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] Clone - 당근마켓18(Phone Auth) 이번에는 전화인증에 대해서 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구성 및 흐름은 아래와 같습니다. 전화 인증을 사용하기 위해서는 Firebase 사이트에서 몇가지 설정을 해야 한다. 전화 인증 선택 테스트용 전화번호를 2개 정보 추가한다 추가된 테스트용 전화번호 및 인증 코드 전화 인증이 완료되면 상태는 Enabled 입니다. 추가된 패키지는 firebase_auth: ^3.6.0 android/app/build.gradle - dependencies 추가 // Declare the dependency for the Firebase Authentication library // When using the BoM, you don't specify v.. [Flutter] Clone - 당근마켓17(firebase 환경설정 테스트) 이번 시간에는 firebase 환경 설정에 대한 테스트를 진행하겠습니다. 추가된 패키지는 아래와 같습니다. firebase_core: ^1.20.0 main.dart import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:firebase_core/firebase_core.dart'; import 'src/apple_app.dart'; import 'src/screens/splash/splash_screen.dart'; import 'src/utils/logger.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); a.. [Flutter] Clone - 당근마켓16(Firebase 환경설정) 이번 시간에는 firebase 환경 설정에 대해서 알아보겠습니다. flutter CLI 방식이 아닌 android 방식으로 진행했습니다. 1. 시작하기 - 회원가입은 미리하시기 바랍니다. 2. 원하는 이름을 입력하세요. 저는 3.0 버전이라서 3 를 붙였습니다. 설정할 필요없이 계속 진행. Default 로 프로젝트 생성 기존 안드로이드 설정 방식으로 진행하였습니다. 여기에 입력할 2개의 값은 아래의 절차 대로 진행하면 된다. 패키지 이름은 여기에서 확인 가능 SHA-1 키 값은 https://developers.google.com/android/guides/client-auth 사이트의 초반부 참고 ~\android>keytool -list -v -alias androiddebugkey -keystor.. [Flutter] Clone - 당근마켓15(HomeScreen, ItemsPage) 이번시간에는 로그인 이후 보여지는 HomeScreen, ItemsPage 화면을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구성은 아래와 같습니다. ./src/screens/home/home_screen.dart import 'package:apple_market3/src/states/user_state.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'items_page.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: .. [Flutter] Clone - 당근마켓14(pageController with provider) 이번시간에는 PageController 를 Provider 로 구현해보겠습니다. 지난번에 인자로 전달하는 방식으로 했던 부분을 Provider 로 변경하는 것입니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 수정할 파일 리스트는 아래와 같습니다. main.dart - 아래 옵션을 추가해야 한다 void main() { // start_screen 에서 provider 를 사용하는데, 값을 변경하는게 아니고 사용만 // 컨트롤러 자체만 사용 하는 경우는 아래 처럼 확실하게 컴파일러에게 알려줘야 한다 Provider.debugCheckInvalidValueType = null; runApp(const MyApp()); } ./src/screens/start_screen.dart.. 이전 1 2 3 4 5 6 7 다음
