본문 바로가기

분류 전체보기

(657)
[Flutter] Clone - 당근마켓3(PageView) 이번에는 PageView 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 기본 화면은 아래와 같습니다. ./src/screens/auth_screen.dart import 'package:flutter/material.dart'; class AuthScreen extends StatelessWidget { const AuthScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: PageView( children: [ const Center( child: Text( 'AuthScreen', style: TextStyle(..
[Flutter] Clone - 당근마켓2(Navigation) 이번에는 Navigation 관련 2가지 패키지에 대해서 알아보겠습니다. Beamer, GetX 를 이용한 네비게이션에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 기본 화면 이동은 아래와 같습니다. 관련 패키지는 아래와 같습니다. 버전은 현재 최신 버전을 사용합니다. get: ^4.6.5 beamer: ^1.5.0 ./src/apple_app.dart import 'package:apple_market3/src/middleware/check_auth.dart'; import 'package:beamer/beamer.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; ..
[Flutter] Clone - 당근마켓1(logger) 이번에는 개발과정에서 중요한 로깅 패키지에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 추가된 패키지 logger: ^1.1.0 ./src/utils/logger.dart import 'package:logger/logger.dart'; final logger = Logger(); main.dart StatelessWidget _splashLoadingWidget(AsyncSnapshot snapshot) { // future has 3 state, hasError, hasData, waiting if (snapshot.hasError) { logger.d('error occur while loading ~'); return const Text('Erro..
[Flutter] Clone - 당근마켓 시작 이번에는 당근마켓 클론 코딩입니다. 이름은 사과마켓이라고 정해봤습니다 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 기본 구조는 아래와 같습니다. 네비게이션 : GetX 상태관리 : GetX, Provider 서버 : Firebase 주소 검색 open API : http://www.juso.go.kr/addrlink/addrLinkApi.do 지도 서비스 : 구글 map 예정 지도 검색 서비스 : 구글 예정 초기화면은 아래와 같다. main.dart - 초기 2초동안 SplashScreen 화면을 보여주다가 AppleApp 으로 화면이 전환됨, 이때 0.5초 동안 천천히 변경되게 AnimatedSwitcher 위젯을 사용함 import 'package:flutter/materi..
[Flutter] Quiz - level2(GridView) 이번에는 코딩셰프 도장깨기 레벨2 입니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - https://github.com/mike-bskim/dojang_level2/releases/tag/01_done Release 01_done · mike-bskim/dojang_level2 github.com 화면은 아래와 같습니다. 미션은 1. api 서버에서 데이터를 받을때까지 로딩 인디케이터 처리 2. 카트에 추가된 아이템 개수 표시 프로젝트 구성 .\main.dart .\controller\product_controller.dart .\model\model_product.dart .\services\service_product.dart .\view\my_page...
[Flutter] Basic - key 이번에는 Key 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 03_global_key · mike-bskim/key_test · GitHub Release 03_global_key · mike-bskim/key_test github.com 초기 화면은 아래와 같습니다. Key 는 우리가 생각없이 지나치지만 위젯을 이동/삭제할 경우 아주 중요한 핵심 포인트입니다. Todo 리스트 처럼 일정 순서를 이동/삭제 등 변경할때 주로 사용된다. Flutter 는 기본적으로 위젯의 타입으로 각자 구분하지만 동일한 위젯을 여러개 사용할때 구분할수 있는 포인트가 key 입니다. Key 종류는 아래와 같은데, 여기서는 상위 3개에 대해서..
[Flutter] Widgets - FCM(Firebase Cloud Messaging) 이번 카테고리는 Firebase Cloud Messaging 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 04_FCM_latest_upgrade · mike-bskim/FCM_test · GitHub Release 04_FCM_latest_upgrade · mike-bskim/FCM_test github.com 초기 화면은 아래와 같습니다. 기본적인 Firebase 설정은 아래 설정을 참고하세요. 1,2번까지만 설정하면 됩니다. 단, SHA1 부분은 필요없습니다. (3. Firebase 프로젝트에서 구글 인증 활성화 부터 필요없습니다.) 2021.08.06 - [Flutter/01 SNS login] - [Flutter..
[Flutter] Widgets - Google map 5 이번 카테고리는 google map 을 사용하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - https://github.com/mike-bskim/google_map_test/releases/tag/09_refactoring_1 Release 09_refactoring_1 · mike-bskim/google_map_test github.com 오늘은 지난 블로그에서 화면 초기 로딩 부분을 수정하였습니다. _goToCurrentPosition 함수를 이용해서 초기 더미 position 에서 현재 자신의 위치 정보를 가져와서 이동하게 초기화면을 처리했는데, 이 부분을 CircularProgressIndicator() 를 이용하여 조금..