Flutter (156) 썸네일형 리스트형 [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.. [Flutter] Quiz - level3(Getx login) 이번에는 코딩셰프 도장깨기 레벨2 입니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 02_done · mike-bskim/dojang_level3 · GitHub Release 02_done · mike-bskim/dojang_level3 github.com 미션은 아래와 같습니다. 1. lgoin 기능 구현 2. 웰컴 페이지 이동시 인디케이터 추가 3. 사용자 이메일 주소를 윌컴 페이지에서 보이게 추가 4. 보너스 문제, sign up 할때 사용자 이름도 입력받고 그걸 Storage 에 user 컬렉션 아래에 추가할것. 화면은 아래와 같습니다. main.dart import 'package:firebase_core/firebase_core... [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: .. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음
