본문 바로가기

Flutter

(156)
[Flutter] Clone - 당근마켓6(PageView - address page) 이번에는 PageView 의 내부에 address page 를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구성은 아래와 같습니다. 자세한 기능은 모델링도 필요하여 차후에 구현하겠습니다. 상단부터 TextFormField, TextButton.icon, Expanded&ListView,builder&ListTile 로 구성되어 있습니다. 주요 파일은 아래와 같습니다. ./src/screens/auth_screen.dart ./src/screens/start/intro_page.dart ./src/screens/start/address_page.dart ./src/screens/auth_screen.dart import 'package:flutter/mat..
[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..
[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...