말랑한 하루

이제 아이템을 누르면 팝업으로 아이템에 대한 상세 정보를 보여주는 페이지를 제작하면서, 겪었던 일들에 대해 얘기해보려 한다. 🐇 static config 일단 색상을 사용하는 것이 많기 때문에, 기존 static config파일을 좀 더 세분화 했다. 기존의 static config는 TabList와, InfoList 들이 담겨있었기 때문에 static list config로 명명하고, 주로 색상을 선택하여 반환하는 static switch config를 생성했다. 🐇 router 팝업을 띄우기 위해선 GoRouter의 push를 사용하면 팝업을 띄울 수 있다. 팝업은 페이지 내 상세 정보이기 때문에, Router에서 관리할 때 중첩 라우트를 사용해 가독성을 높이고자 했다. 🥕 nested router ..

🐇 TabBar/TabBarView Make 아이템 페이지는 상단에 탭이 존재하는데, DefaultTabController와 TabBar/TabBarView를 사용하지 않고 직접 구현하려 했다. 내가 원하는 상단의 Tab이 Custom하기도 하며, 다른 페이지에서도 사용하기 때문이다. 그래서 추후 공용으로 사용될 SelectTab은 위젯으로 빼놓고, 사용될 tabList에 equipment제작 시 필요한 이름, 속성 또한 글자 수에 따른 font크기와 dime size, 마지막으로 selectTab를 담았고, 마지막으로 관리할 provider와 함께 위젯 파라미터로 넘겼다. 그 구현은 다음과 같다. class DetailSelectTabWidget extends ConsumerWidget { const ..

인스턴스란, 객체 지향 프로그래밍에서 해당 클래스의 구조로 컴퓨터 저장 공간에서 할당된 실체를 의미합니다. 클래스는 속성과 행위로 구성된 일종의 설계도입니다. 이런 인스턴스는, 하나의 클래스에서 호출할 때마다 새롭게 생성되므로 컴퓨터 저장 공간을 지속적으로 차지하게 됩니다. 그러므로 하나의 클래스에서 하나의 인스턴스만이 생성되도록 하면 컴퓨터 내 저장 공간을 효율적으로 관리할 수 있게 된다. 또한, 언제 어디서나 인스터스를 호출해도 동일한 인스턴스를 활용할 수 있어 코드가 유연해지기 좋다. 우리는 이것을 Singleton이라 부른다. Singleton은 디자인 패턴 중 하나로, 오직 하나의 인스턴스를 활용한다는 목적으로 설계되었다. 이 Singleton을 Dart에서는 어떻게 구현하는지, 나는 무엇을 위..

캐릭터 페이지에 필요한 정보를 제공할 때, 자료로 남겨두면 좋을 것 같은 내용을 담아봤다. 일단 캐릭터의 사진을 보여주면서, 배경과 함께 블러 처리된 모습으로 전체 배경에 스타일을 따로 주지 않고 멋스럽게 꾸며지길 원했다. 그 구조를 설계하는 방법은 다음과 같다. (main)Conatiner->Stack->(deco)Container+Column (deco)Container에 블러 처리할 원하는 이미지를 설정하고, Column에 내가 담고 싶은 요소를 담으면 된다. (deco)Container를 설정하는 방법은 다음과 같다. 🍒 Container with blur Image of background ※ reference : https://api.flutter.dev/flutter/painting/BoxD..

※ reference : https://api.flutter.dev/flutter/dart-core/DateTime-class.html API 통신을 하던 도중, Date가 required options인 queryParamters를 확인하였다. 그래서 Dart에서 Date를 어떻게 받아오고 사용하는지에 대해 정리하려 한다. 🥕 Date Create Dart에서 Date는 DateTime을 활용해서 가져올 수 있다. 그리고 DateTime을 가져왔을 때, DateFormat을 활용해 정형화 된 String 데이터를 얻을 수 있다. 아래부터는 DateTime에서 사용할 수 있는 경우에 대한 소개이다. 🍒 DateTime now 현재를 의미하는 now method를 활용하여 가져올 수 있다. 그전에 Date..

Dio를 활용하여 API통신을 진행할 때, 진행되고 있는지 또는 요청 처리 중인지 확인하기가 어려웠다. 그래서 앞으로 개발을 해나갈 때, API 통신과 관련한 작업을 진행하면서 유용하게 사용할 수 있는 Loading UI를 제작하려 한다. 🐇 Loading Animation Widget ※ reference : https://pub.dev/packages/loading_animation_widget Package Loading UI Animation이 개발되어 있는 라이브러리를 찾았다. 다양한 모습의 Loading Spinner가 제작되어 있으니 공식문서에서 확인하고 사용하길 바란다. 🥕 Install ※ reference : https://pub.dev/packages/loading_animation_..

dio는 http보다 api 통신을 위해 다양하고 강력한 기능을 제공합니다. dio를 사용하면서 어떻게 하면 프로젝트에 더 간편하게 사용할 수 있을지 고민했습니다. 이번 칼럼은 그 고민에 대한 내용들입니다. 🐇 Dio Instance 기본적으로 SingleTon Project에 해당된다 생각하여, Dio의 Instance를 생성해주었습니다. class DioInstance { final dio = Dio(); DioInstance() { dio.options.baseUrl = dotenv.get('NEXON_API_URL'); dio.options.headers = { 'accept': 'application/json', 'x-nxopen-api-key': dotenv.get('NEXON_API_KEY'..

Github에 Personal API KEY가 노출되지 않도록 dotenv를 활용해 API KEY를 변수로 치환하여 사용할 것이다. 🐇 flutter_dotenv 다음은 flutter_dotenv를 설치하고 사용하기 까지 순서를 기술하겠다. 🥕 flutter_dotenv install flutter pub add flutter_dotenv flutter pub get 🥕 root directory에 .env 파일 만들기 🥕 .gitignore에 *.env 추가하기 🥕 pubspec.yaml의 flutter: assets:에 - .env 추가하기 🥕 .env 파일에 변수와 키 추가하기 VALUE_NAME=API_KEY 🥕 main.dart에서 .env 파일 읽어오기 void main async { awai..