본문 바로가기

분류 전체보기

 (657)
[Flutter] Clone - 당근마켓11(Address - ListView) 이번에 검색결과(도로명 주소)를 ListView 형식으로 화면에 표시해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면은 아래와 같습니다. 검색창에 단어를 입력하고 엔터 클릭시 검색결과 반환. 현재는 최대 100건만 표시하였다. ./src/screens/start/address_service.dart - 함수의 리턴 타입을 모델링 타입으로 변경함 Future searchAddressByStr(String text) async { final formData = { 'confmKey': jusoKey, 'currentPage': '1', 'countPerPage': '100', 'keyword': text, 'resultType': 'json', }; var resp ..
[Flutter] Clone - 당근마켓10(Address Model) 이번에 도로명 주소를 검색하는 API 기능을 구현하겠습니다. 화면 레이아웃은 다음에 구현 예정입니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 api 서버는 "https://www.juso.go.kr/openIndexPage.do" 사이트를 이용했습니다. 주소정보누리집(도로명주소 안내시스템) 국가기초구역이란 각종 관할구역(통계, 우편, 소방, 경찰 등)을 관리하기 위해 나눈 단위 구역입니다.국가기초구역번호는 우편번호로 사용됩니다. www.juso.go.kr API 키는 여기서("https://www.juso.go.kr/addrlink/openApi/apiReqst.do") 신청하면 됩니다. 개발용 키는 본인 인증이 필요없으므로 필수정보를 대략 입력해도 발급 가능합니다. op..
[Flutter] Clone - 당근마켓9(logout) 지난번에 auth page 에서 인증 성공후 Home Screen 으로 이동하는 기능을 추가했습니다. 이번에는 반대로 Home Screen 에서 로그아웃하면 다시 auth page 로 이동하는 기능을 구현하겠습니다. (실제 사용자관리는 차후 예정). 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 흐름은 아래와 같다. 지난번 인증 받고 로그인할때 화면 이동시 Get.toNamed('/') 을 사용하여 Home Screen 화면에 리턴 버튼이 생겼다. 그래서 이번에는 Get.offAllNamed('/'); 로 변경하였다. ./src/screens/home_screen.dart class HomeScreen extends StatelessWidget { const HomeScre..
[Flutter] Clone - 당근마켓8(authorization-login) 이번에는 auth page 에서 인증 성공후 Home Screen 으로 이동하는 기능을 추가해보겠습니다 (실제 사용자관리는 차후 예정). 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 기존에 네비게이션을 beamer 와 getx 로 이중으로 진행하였는데, beamer 보다 getx 가 가성비가 좋은거 같아서 이후로는 getx 로 네비게이션을 구현할 예정입니다. 특히, beamer 의 BeamGuard 의 기능은 GetX 에서는 middlewares 로 구현 가능하다. 그래서 상태관리도 GetX 로 구현할 예정입니다. 화면 흐름은 아래와 같다. ./src/apple_app.dart - refactorying 및 initialBinding 추가 import 'package:beame..
[Flutter] Clone - 당근마켓7(PageView - auth page) 이번에는 PageView 의 내부에 auth page 를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 새로운 페이지 이름이 기존 페이지인 auth_screen 과 비슷하여 이름을 수정하였습니다. auth_screen.dart => start_screen.dart AuthScreen() => StartScreen() 화면 구성은 아래와 같습니다. 자세한 기능은 모델링도 필요하여 차후에 구현하겠습니다. 새로운 패키지 추가 - 입력값을 쉽게 검증하기 위함 flutter_multi_formatter: ^2.5.8 start_screen.dart - 새로운 페이지 추가 class StartScreen extends StatelessWidget { StartScreen(..
[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..

티스토리툴바