말랑한 하루

🐇 Notifier Implement MainHome Page가 만들어졌기 때문에 캐릭터의 닉네임을 출발로 다양한 정보를 얻어와야 한다. 그래서, 프로젝트에 필요한 4개의 model, Notifier, NotifierProvider를 구현해 나가려 한다. 여기서 모든 정보는 백엔드와 비동기통신이 이뤄지기 때문에, AsyncNotifier과 AsyncNotifierProvider를 사용하고 model은 fromJson/toJSon에 대한 기본적인 구현이 필요하다. 🥕 Model Model을 직접 구현해 가기란 정말 어렵다. 다양하고 방대한 양의 속성을 한땀 한땀 설계해 나가야 하기 때문에 정말 복잡하지 않을 수 없다. 하지만 이를 간편하게 해주는 서비스가 존재한다. ※ reference : https://..

🐇 MainHome Page MainHome Page에서는 TextFiled와 Custom 검색 버튼을 활용해서 캐릭터를 검색할 것이다. TextEditingController를 사용해 TextFiled를 감시하고 TextField가 onSubmitted 되거나, 검색 버튼을 클릭할 시 TextEditingController의 Text로 캐릭터를 검색한다. TextFiled는 decoration 속성에 InputDecoration Class를 사용해야 한다. Container 처럼 Box가 아니기 때문에 BoxDecoration은 사용할 수 없다. 서로 각기 다른 Widget을 만들 때 가장 오래 걸리는 일이 위치와 크기를 맞추어 주는 것이다. 시간을 줄이기 위해 가장 중요한 것은, Widget의 집합 ..

🐇 AppBar 앱바는 BottomNavigationBar처럼 ConsumerWidget을 상속받는 Class로 구현할 수 없었다. 그 이유는 Class로 구현되는 Widget은 무엇을 반환하던 PreferredSizeWidget를 상속받지 않기 때문에, appBar의 속성에 위배된다. 그래서 AppBar의 경우, BuildContext를 매개변수로 받아 AppBar Widget을 직접 반환하는 함수로 만들어야 정상적으로 appBar에 할당이 가능하다. AppBar를 구현하려면, 내부의 모습을 이해하 고 있어야 한다. 공식문서에서 소개하는 AppBar의 형태는 다음과 같다. leading은 주로 Icon이 배치된다. Menu Icon을 통해 좌측의 Drawer를 관리하거나, Application의 Mai..

🐇 BottomAppBar 기존에 TabBar나 BottomNavigationBar 대신 자유도가 높은 BottomAppBar를 사용하였다. BottomAppBar의 주요 속성은 다음과 같다 🍒 elevation 상위 앱 바를 기준으로 이 하단 앱 바를 배치할 z 좌표입니다. 하단 앱 바 아래 그림자의 크기를 제어합니다. BottomAppBar의 child로 Row를 활용해 Tab을 직접 구현하였다. 여기서 주목해야 할 점은, GoRouter와 StaticConfigData를 활용하여 선택한 탭에 대해 사용자에게 가시적으로 보여줄 수 있는 UI를 만드는 것이다. 주요 구현은 다음과 같이 하였다. static final List mainBottomNavigationTab = [ { 'path': '/cha..

🐇 GoRouter 다음의 Router의 기본 설정을 잊지 말자. GoRouter를 학습했음에도 불구하고, 실전에서 직접 사용할 땐 놓치는 부분이 많았다. 🍒 GoRouter가 설치되어 있는가 🍒 ProviderScope를 적용 시켰는가 🍒 MaterialApp에 router를 적용 시켰는가 현재 Router의 위치와 Route의 정보를 담고 있는 Widget의 값과 비교하면 보다 많은 활동을 할 수 있다. 예를 들면, Navigation가지고 있는 Route정보가 이 현재 Router의 정보를 비교하여 어떤 Navigation이 선택됐는지 알 수 있다. 그러기 위해서 Router를 구현하고, StaticConfig에 Router와 매칭되는 TabList를 생성해주면 좋다. TabList에는 Naviga..

최근 NEXON에서 Open API를 제공함과 동시에 Flutter로 Application을 제작하기로 생각했습니다. 실질적으로 Flutter에서 API를 요청하고 결과 값을 얻어오며 솔 프로젝트를 진행해도 될 몸집의 프로젝트 였기에 마음을 다잡았습니다. Flutter를 활용해서 Application을 제작하는 과정을 담아가려하고, 그 속에서 Flutter를 개발하시는 분들이 비슷한 상황을 겪고있을 때 도움이 되기를 바라면서 칼럼을 써가겠습니다. 이번 포스터에서는 기본적인 프로젝트 세팅을 어떻게 진행했는지 알려드리겠습니다. 🐇 Project Setting 프로젝트를 시작하기 앞서, 어떤 구조로 프로젝트를 설계했는지 간단하게 보여드리려 한다. 🥕 Make Folder and Files 전체적인 내용을 담고..

reference : https://riverpod.dev/ko/docs/concepts/modifiers/auto_dispose 우리가 Notifier를 구현하다 보면, 자연스레 NotifierProvider의 Instance가 Application에 남아있게 된다. 하지만 NotifierProvider를 사용하지 않는 경우에는 해당 Instance는 메모리 낭비이기 때문에 이를 해결하기 위한 autoDispose 옵션을 사용한다. 정형화하여 설명하자면, AutoDispose는 Provider Package의 확장된 클래스입니다. 공급자의 수명 주기를 자동으로 관리하여 공급자가 더 이상 필요하지 않을 때 폐기되도록 설계되었습니다. 이 기능은 메모리 누수를 방지하기 위해 삭제해야 하는 상태를 처리할 때 ..

reference : https://pub.dev/packages/dio Dio는 Dart/Flutter를 위한 강력한 HTTP Networking Package는 다음과 같은 기능을 지원합니다. 🍒 Global configuration 🍒 Interceptors 🍒 FormData 🍒 Request cancellation 🍒 File uploading/downloading 🍒 Timeout 🍒 Custom adapters 🍒 ransformers 이번 글귀에서는 가장 기본적인 dio의 get/post의 사용법과, 데이터에 따른 사용법 몇 가지를 알아보겠습니다. 추후 다른 강력한 기능은 개별적으로 포스팅 하려합니다. 🐇 Dio Install ※ reference : https://pub.dev/packa..