본문 바로가기

Flutter

 (156)
[Flutter] Provider Access - Anonymous route 오늘은 Provider 적용후 라우팅을 통한 화면 전환시 데이터 공유에 대해서 정리했습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.10 오류가 있는 원본 소스코드 - Release 19_Provider_Access_anonymous_route_error (github.com) Release 19_Provider_Access_anonymous_route_error · mike-bskim/provider_overview github.com 프로젝트는 main.dart, show_me_counter.dart, ./models/counter.dart 파일로 구성되어 있다. 화면 구성은 아래와 같다. 첫화면에서 카운터를 증가시킨후, 네..
[Flutter] Could not find the correct Provider 오늘은 Provider 오류중 흔하게 발생하는 "Could not find the correct Provider" 에 대해서 정리했습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.10 오류가 있는 원본 소스코드 - Release provider_context_error_org · mike-bskim/provider_overview (github.com) Release provider_context_error_org · mike-bskim/provider_overview github.com Provider 를 구현한 위젯에서 바로 Provider 를 호출하는 경우 발생한다. class MyHomePage extends Statef..
[Flutter] Consumer, Selector 오늘은 Consumer 에 대해서 정리했습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.10 소스코드 위치 - https://github.com/mike-bskim/provider_overview/releases/tag/setState_to_Consumer1 Release setState_to_Consumer1 · mike-bskim/provider_overview github.com 화면은 이전 블로그와 동일한 구조입니다. 각 위젯별로 다른 방식으로 상태관리를 한다. Counter A - Provider Middle - context.read() Counter B - Consumer+Provider Sibling - Consu..
[Flutter] ChangeNotifierProvider 오늘은 ChangeNotifierProvider 에 대해서 정리했습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.10 소스코드 위치 - Release setState_to_Provider · mike-bskim/provider_overview (github.com) Release setState_to_Provider · mike-bskim/provider_overview github.com 상태관리 패키지들도 다양하고 하나의 패키지 내에서도 다양한 방식으로 상태관리를 할 수 있습니다. 그중에서 오늘은 ChangeNotifierProvider 에 대해서 알아보겠습니다. 먼저 화면은 아래와 같습니다. 이전 setState 샘플 코드..
[Flutter] setState 오늘은 setState 에 대해서 정리했습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.10 소스코드 위치 - Release setState_Test · mike-bskim/provider_overview (github.com) Release setState_Test · mike-bskim/provider_overview github.com setState 를 사용하면 얼마나 많은 부분을 다시 랜더링할까요? 몇단계의 위젯으로 나눠서 아래와 같은 앱을 만들었습니다. 먼저 화면설명은 아래와 같습니다. 앱을 실행하면 처음에 아래와 같이 각 위젯별 build 로그를 출력됩니다. I/flutter ( 5490): -------------..
[Flutter] App Weather - 6단계 완료(indicator 추가) 오늘은 마지막으로 indicator 를 추가하여 데이터 가져오는 동안 사용자에게 기다리는 화면을 보여주는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.8.1 소스코드 위치 - Release indicator · mike-bskim/weather (github.com) Release indicator · mike-bskim/weather github.com 패치키 추가 flutter_spinkit: ^5.1.0 loading.dart 수정 - build 부분만 수정하면 됩니다. @override Widget build(BuildContext context) { return const Scaffold( ba..
[Flutter] App Weather - 5단계 추가 데이터 & 모델링 이번에는 추가 데이터(대기질 및 미세먼지) 매핑 및 해당 데이터 모델을 만드는 방법에 대해서 알아보겠습니다. 1. 미세먼지 관련 api 추가 2. 데이터 모델링 추가(참고자료 - [Flutter] App Weather - 3.5단계 model of openweathermap) 3. 코드 정리(리팩토링) 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.8.1 소스코드 위치 - Release airData_Model · mike-bskim/weather (github.com) Release airData_Model · mike-bskim/weather github.com 1. current_air.dart - 미세먼지 모델링을 추가합니다. ..
[Flutter] App Weather - 4단계 UI 이번에는 화면구성에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.8.1 소스코드 위치 - Release UI · mike-bskim/weather (github.com) Release UI · mike-bskim/weather github.com 오늘의 목표 화면입니다. 먼저 패키지 버전 문제로 약간의 수정이 필요합니다. 패키지 호환문제로 구글링하니 '^'를 제거하라고 해서 했습니다. google_fonts: 2.2.0 '^'를 삭제해주세요. 문제없는분들은 스킵하세요. loading.dart 수정 - api 에서 한글을 지원해서 언어설정을 추가했습니다. 안하셔도 됩니다. Network 클래스 객체 생성시, 파라..

티스토리툴바