오늘도 디벅잉

🧭 CustomScrollView 스크롤뷰가 포함하는 자식 위젯들의 형태(높이 등)를 원하는 대로 수정하기 위해 CustomScrollView를 사용합니다. CustomScrollView는 Sliver로 시작하는 몇개의 위젯들을 자식으로 가질 수 있습니다. SliverFillRemaining 그 중에 SliverFillRemaining을 다뤄보고자 합니다. 위젯들의 전체 높이가 화면을 초과하는 경우 가장 쉽게 생각할 수 있는 방법은 전체 위젯을 SingleChildScrollView로 감싸는 것입니다. 그런데 표현하는 내용에 따라 위젯들의 전체 높이(노란색)가 화면의 일부만 채우는 경우 어떻게 될까요? 아래 이미지의 하단과 같이 흰 여백이 생길 것입니다. 이 여백을 채우기 위해서는 SingleChildS..

🧭 Flutter MediaQuery.of(context).viewPadding.bottom 아이폰 X 이후로 등장한 하단 노치는 높이 값이 34입니다. 플러터에서는 MediaQuery.fo(context).viewPadding.bottom으로 34라는 값을 얻을 수 있습니다. 안드로이드이거나 IOS이더라고 하단 노치가 없다면 위의 값은 0이 됩니다. 하단 노치에 대한 대응으로 SafeArea로 감쌀 수도 있고, 해당 값을 확인해서 따로 여백을 둘 수도 있습니다. https://medium.com/flutter-community/a-flutter-guide-to-visual-overlap-padding-viewpadding-and-viewinsets-a63e214be6e8 A Flutter guide t..

🧭 initState 내에서 비동기 함수를 호출한다면? Flutter의 StatefulWidget은 initState, dispose 같은 메서드를 오버라이드해서 사용하게 됩니다. 다만, API 통신과 같은 비동기 함수를 initState 안에서 호출하면 아래와 같은 에러가 발생합니다. 비동기 함수 외부에서 정의 initState 메서드 내에서 비동기 함수를 호출할 수 없기 때문에, 아래와 같이 async/await를 생략한 비동기 함수를 사용하는 예제를 종종 접합니다. TRANSLATE with x English Arabic Hebrew Polish Bulgarian Hindi Portuguese Catalan Hmong Daw Romanian Chinese Simplified Hungarian Rus..

🧭 Get.toNamed GetX로 route를 관리한다면 Get.toNamed를 사용해서 페이지를 전환하게 됩니다. 이 때 GetX는 사용자의 이중 클릭 등으로 페이지를 2번 호출하지 않도록 같은 페이지에 재진입을 막도록 되어 있습니다. preventDuplicates 재진입을 막는 속성은 preventDuplicates로 페이지에 재진입을 허용하고 싶은 경우 해당 프로퍼티를 false 값으로 반영하면 됩니다. TRANSLATE with x English Arabic Hebrew Polish Bulgarian Hindi Portuguese Catalan Hmong Daw Romanian Chinese Simplified Hungarian Russian Chinese Traditional Indonesi..

🧭 GetxController 상태관리를 위해 Getx 라이브러리를 사용하게 된다면 GetxController를 상속한 컨트롤러를 활용하게 됩니다. 서비스할 앱의 각 페이지와 컨트롤러를 1:1 대응으로 사용하는 것이 가장 간단한 방법이라고 할 수 있습니다. 컨트롤러 간 데이터 전달 다만 여러 페이지에 공통적으로 반영되어야 할 상태가 있는 경우 컨트롤러 간에 데이터 전달이 필요합니다. 가장 간편한 방법으로는 하나의 컨트롤러를 여러 페이지에서 걸쳐서 사용하는 것입니다. 또다른 방법은 공유할 상태를 파라미터로 전달하고 전달받은 페이지의 컨트롤러에서는 전달해준 페이지의 컨트롤러를 찾아서 상태를 변경하는 것입니다. (전달해준 페이지의 컨트롤러를 유지한다는 조건 하에 가능)

🧭 Positioned Widget Stack 위젯의 child 위젯으로 positioned widget을 사용합니다. Stack 안에서 특정 위치에 위젯을 둘 수 있습니다. 너비 100%로 설정하기 positioned widget 내에서 container 위젯을 사용하는 경우 width 속성에 double.infinity를 넣어줘도 너비가 변경되지 않습니다. positioned widget의 너비를 변경하기 위해서는 left, right 속성에 값을 0(또는 원하는 간격)으로 입력하면 너비를 변경할 수 있습니다.

🧭 Flutter SDK 다운그레이드 프로젝트를 진행하다보면 특정 시점의 플러터 버전을 유지해야 하는 경우가 있습니다. 시간적 여유가 있다면 플러터 업그레이드를 주기적으로 하고 그에 따른 문제들을 차근차근 해결하면 됩니다. 하지만 당장 요구사항들도 해내기 어려운 마당에 무턱대고 flutter upgrade를 해버리면 버전에 따른 버그를 잡아내느라 시간을 허비하게 될 수도 있습니다. 플러터의 버전을 변경할 2가지 방법을 살펴보겠습니다. 1. 플러터 SDK git history 활용 첫번째 방법은 플러터 sdk가 설치된 경로로 이동하여 원하는 버전의 commit을 checkout 하는 것입니다. $ git checkout 2.2.2 이 방법을 사용하면 현재 사용중인 컴퓨터의 모든 플러터 프로젝트에 영향을 받..

🧭 OVERFLOWED BY x.x PIXELS 플러터로 개발중에 화면을 초과하는 에러를 종종 마주하게 됩니다. 오늘은 2번이나 해당 경우를 마주했기 때문에 TIL로 기록해 둡니다. SafeArea 첫번째 경우는 SafeArea로 Scaffold 전체를 감싸지 않고, Scaffold 내 body만 SafeArea로 감싸서 하단 네브바가 overflow 하는 에러가 발생했습니다. SafeArea를 사용하는 경우 당장 차일드 위젯이 하나 뿐이더라도 최상단에서 감싸도록 해야 겠습니다. overflowed by 1.0 pixel 두번째로 divider 위젯의 두께로 인해 1 pixel을 초과하였습니다. 에러가 발생한 곳은 네모 박스 안에서 텍스트 위젯과 디바이더, 그리고 텍스트 위젯까지 총 3개의 위젯이 컬럼 ..

🧭 어떤 경우에? 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으로 정의하고 싶겠지만 그렇게 했다간 상태가 변할 때마다 부모 위젯도 매번 다시 그려지면서 상태가 초기화되는 안타까운 경험을 ..