오늘도 디벅잉

🧭 어떤 경우에? ListView 내 ListViewItem이 Stack 위젯을 가지고 Stack 위젯에 사용자 이벤트가 발생했을 때 숨겨둔 Positioned 위젯 등을 노출시킬 수 있습니다. 이 때 노출된 위젯의 높이가 부모 위젯의 높이를 초과하는 경우 다음번 나오는 ListViewItem에 가리게 됩니다. 높이를 초과하는 부분을 가리지 않고 그대로 드러내려면 어떻게 해야 할까요? 어떻게? OverlayEntry, CompositedTransformFollower 등을 조합하여 이를 구현할 수 있습니다. 📌 https://blog.logrocket.com/complete-guide-implementing-overlays-flutter/ Implementing overlays in Flutter - L..

🧭 어떤 경우에? ListView 내 ListViewItem에서 버튼을 누르는 경우 별도의 위젯을 보였다가 숨겼다가 하고 싶은 경우가 있습니다. 가령 인스타그램, 트위터 같이 피드들을 리스트 형식으로 보여주는 앱에서 점 3개짜리 버튼을 누르면, 메뉴 선택 창이 화면위의 특정 위치를 차지하는 경우가 있을 것입니다. 어떻게? isVisible 같은 bool 타입의 변수를 만들어서 값을 저장해 두면 될 것 같습니다. 이 변수를 어디에서 정의해야 할까요? 상태가 변해야 하니까 StatefulWidget을 활용해야 겠습니다. ListView를 포함하는 부모 위젯을 StatefulWidget으로 정의하고 싶겠지만 그렇게 했다간 상태가 변할 때마다 부모 위젯도 매번 다시 그려지면서 상태가 초기화되는 안타까운 경험을 ..

🧭 Font Awesome 플러터의 기본 제공 아이콘 말고 새로운 아이콘을 적용해 보고 싶지 않으신가요? font_awesome_flutter 패키지를 설치하면 됩니다! 패키지를 설치하면 아이콘 아카이브(?)로 유명한 fontawesome.com 사이트에서 제공하는 무료 아이콘을 활용할 수 있습니다. 📌 https://pub.dev/packages/font_awesome_flutter font_awesome_flutter | Flutter Package The Font Awesome Icon pack available as Flutter Icons. Provides 1600 additional icons to use in your apps. pub.dev

🧭 selectedFontSize showSelectedLabels 프로퍼티에 false를 입력하면 bottomNavigationBarItem의 라벨을 숨길 수 있지만, 여전히 여백을 차지하고 있습니다. BottomNavigationBar를 그대로 사용한다면 당장 문제될 것은 없습니다. 다만, BottomNavigationBar의 높이를 변경한다든지 하는 변경을 가할 경우 내부의 아이콘이 범위를 초과하는 에러가 발생할 수 있습니다. 우리는 margin 혹은 padding 값을 준 적이 없기 때문에 당황스러울 수 있습니다. 이 때 selectedFontSize 값을 0으로 주면 해당 에러가 사라지는 것을 확인할 수 있습니다. 📌 https://api.flutter.dev/flutter/material/Bo..

🧭 splash screen 앱을 처음 열면 기본적인 화면구성을 위해 로딩 시간이 발생합니다. (앱이 구동 전인 경우 콜드 스타트, 앱이 구동을 시작했으나 화면이 그려지는 중인 경우 웜 스타트라고 함) 이 때 사용자에게 브랜드 로고 등을 노출하는 화면을 스플래시 스크린이라고 합니다. 플러터에서 해당 화면을 구현하더라도 플러터가 네이티브 앱에 올라가는 동안은 하얀 화면을 노출할 수 밖에 없습니다. 이 때 flutter_native_splash 패키지를 활용하면 플러터가 네이티브 위로 올라가는 시간에도 스플래시 스크린을 적용할 수 있습니다. flutter_native_splash 1. 패키지 설치 $ flutter pub add flutter_native_splash --dev ※ 스플래시 스크린의 종료 시..

🧭 플러터에서 HTTP 통신을 위한 기본적인 방법으로 dio 패키지를 사용할 수 있습니다. retrofit은 dio를 조금 더 쉽게 사용할 수 있도록 하는 패키지입니다. freezed는 데이터 모델을 쉽게 생성해주는 패키지입니다. 아키텍처 레이어를 기준으로 구분해 보겠습니다. Network - API - retrofit (dio) Data - dto - freezed Domain - usecase - ?? 어렵다 어려워.. 공부해서 보충하겠습니다..

⚡🕊️🧭 VS Code에서 터미널을 통해 플러터 프로젝트를 생성하고, 해당 프로젝트를 VS Code에 바로 띄우는 방법은 다음과 같습니다. $ cd [폴더경로] 프로젝트를 생성할 폴더로 이동 $ flutter create [프로젝트명] 플러터 프로젝트 생성 $ cd [프로젝트명] 프로젝트 폴더로 이동 $ code -r . VS Code 현재 창에서 프로젝트 실행 (새 창으로 열려면 code . 입력)

⚡🕊️👾 SHA-1 키 확인 flutter 앱을 firebase에 연결하던 중 SHA-1 키를 확인하기 위해 다음과 같은 명령어를 입력했습니다. $ ./gradlew signingReport 하지만 아래와 같은 에러가 발생하여 원하는 값을 정상적으로 받아올 수 없었습니다. 'Android Gradle plugin requires Java 11 to run.' 자바 11 이상의 버전이 필요하다며 몇 가지 해결책을 친절하게 제시해 줍니다. 저는 JAVA_HOME 환경변수의 값을 수정하기로 결정했습니다. 환경변수는 VS Code 뿐만 아니라 다른 IDE를 사용하더라도 동일한 영향을 줄 수 있기 때문입니다. 내 PC > 속성 > '고급 시스템' 검색 > 고급 시스템 설정 보기 > '고급' 탭의 '환경 변수' >..

⚡🕊️🧭 BottomNavigationBar BottomNavigationBar 위젯은 label 속성이 필수인데, 이 label을 없애고 싶은 경우가 있습니다. showSelectedLabels, showUnselectedLabels 프로퍼티에 각각 false를 대입하면 label 없는 BottonNavigationBar를 만들 수 있습니다. 📌 https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html BottomNavigationBar class - material library - Dart API A material widget that's displayed at the bottom of an app for selecting a..

🎯⚡🕊️ PageView 플러터에서는 페이지 스크롤(스와이프)을 구현하기 위해 PageView 위젯을 사용합니다. PageView 위젯은 controller, children 2가지 인자를 기본적으로 사용합니다. (scrollDirection, reverse 등과 같은 매개변수를 통해 스크롤의 성질을 설정할 수도 있음) children 매개변수에는 예상하듯이 스크롤이 필요한 페이지들을 인자로 대입합니다. controller에는 PageController 인스턴스를 대입하게 됩니다. PageController PageController 인스턴스를 통해서 페이지 이동을 컨트롤할 수 있습니다. initialPage와 같은 프로퍼티를 통해서 PageView의 children 중에서 사용자에게 처음으로 노출될 페..