본문 바로가기

Flutter/12 Clone 당근마켓

(54)
[Flutter] Clone - 당근마켓5(PageView - intro page) 이번에는 PageView 의 내부에 intro page 를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 추가 페이지 화면은 아래와 같습니다. ./src/screens/auth_screen.dart import 'package:flutter/material.dart'; import 'start/intro_page.dart'; class AuthScreen extends StatelessWidget { const AuthScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: PageView( children: [ const In..
[Flutter] Clone - 당근마켓4(theme) 이번에는 theme 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 폰트 적용 전후 화면은 아래와 같습니다. pubspec.yaml - 도현체를 다움받아서 아래 위치에 복사해서 넣고 폰트정보를 설정한다 fonts: - family: DoHyeon fonts: - asset: assets/fonts/BMDOHYEON_ttf.ttf ./src/apple_app.dart - getRouter(), beamRouter() 설정은 동일하게 적용하면 된다 // beamer 라우팅시 설정방법 MaterialApp beamRouter() { return MaterialApp.router( debugShowCheckedModeBanner: false, title: 'Ap..
[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..