🐋 Flutter

개요최근에 플러터 Stack 관련된 오류를 심하게 겪었다.아무래도 그동안 Stack에 대한 이해도가 낮아서 그런지 빠르게 문제해결을 하는데 어려움을 겪은 것 같다.그래서 Stack의 기본 원리와 구조를 찾아보게 되었고, 내 나름대로 개념과 예시를 정리하게 되었다.# Flutter Stack 위젯의 크기 결정 방식 이해하기Flutter에서 Stack은 여러 위젯을 겹쳐서 배치할 수 있게 해주는 레이아웃 위젯이다. Stack이 어떻게 자신의 크기를 결정하는지 자세히 알아보자.Stack의 기본 원리Stack의 크기는 기본적으로 non-positioned 자식들에 의해 결정된다. 이때 non-positioned 자식들이 있다면, Positioned가 적용된 자식들은 Stack의 크기 결정에 영향을 주지 않고 S..

개요얼마 전에 플러터로 동글동글한 UI를 개발하던 중 Stack 구조에 자식위젯들을 원형으로 배치해야 되는 일이 생겼다.가장 효율적인 원형배치를 하기 위해서는 dart:math 패키지에 있는 삼각함수 기능들 (sin, cos) 등을 사용할 필요가 있었고, 깔끔한 방법으로 구현을 하게 되어서 공유를 하고 싶었다.아래의 사진은 내가 구현한 원형 스택 구조의 모습이다.   과일의 이름들을 따서 각 개수만큼 자동으로 원형 배치가 이뤄지는 구조다.이를 구현하기 위해서는 우선 삼각비에 대해 이해할 필요가 있다.중학교 때 배웠던 내용이지만 시간이 지나면서 거의 기억이 나지 않았는데, 원형 좌표를 구현하기 위해 원 방정식을 이용하다 더 쉬운 방법인 삼각비를 기억해 내게 되었다.  삼각비를 통한 계산 공식  자, 복습을..

MediaQuery에 대해플러터에서는 MediaQuery라는 클래스가 존재한다.MediaQuery는 앱이 실행 중인 장치의 화면에 대한 정보를 가져오기 위한 용도로 사용하며 화면의 사이즈를 포함한 다양한 기능들을 제공하고 있다.Flutter에서 반응형 UI를 사용하기 위해서는 없어서는 안 될 존재이며, 이를 이용해 다양한 UI 기능을 제공하는데 도움을 줄 수 있다. MediaQuery 가 제공하는 기능들MediaQuery를 사용할 때는 MediaQuery.of(context).[property] 를 이용해 원하는 프로퍼티를 가져와 사용할 수 있다.현재 3.24.0 기준으로 MediaQuery에서 제공하는 기능은 다음과 같다. sizewithNoTextScalingwithClampedTextScalingv..

개요플러터에서 현지화(Localization)를 적용하기 위한 패키지는 다양하다.가장 대표적으로 사용되는 패키지인 easy_localization과 플러터 기본 패키지인 flutter_localizations가 있다 (flutter_localization 아님)그러던 중 실시간 반응형 앱을 개발하다가 localization을 적용했을 때 매번 앱을 재시작한다는 점이 나를 괴롭게 했다.또한 외부 패키지를 도움받아서 localization을 적용하려니 앱이 무거워지는 느낌도 드는 게 좋지 않았다.이참에 새롭게 개발을 하는 겸 나는 외부패키지의 도움 없이 직접 localization을 적용해 보자고 결심을 했고, 깔끔하게 나만의 방식으로 localization을 적용하게 되었다.  구성Flutter 3.10..

개요일반적인 객체지향 프로그래밍 언어에서는 새로운 객체를 생성할 때는 생성자 호출 시 new 키워드와 함께 객체를 생성할 수 있다.Flutter 도 초창기 1.x 버전 당시에만 해도 어떤 클래스든 생성자를 호출하여 객체를 생성할 때 new 키워드를 반드시 붙였어야 했다.하지만 대부분의 Widget 들은 class로 선언되어 사용되고 있기 때문에 new 키워드의 잦은 사용으로 이를 보완하게 되면서  new를 사용하지 않더라도 생성자 호출 시 자동으로 new 생략하여 객체를 생성할 수 있게 되었다. (일반 class도 적용됨)그러나 만약 같은 객체를 무수히 많이 생성하게 된다면 과도한 메모리 오버헤드가 발생하게 될 것이다.이때 싱글톤패턴은 객체를 딱 한 번만 생성하여 사용하도록 도와주는 패턴이다.또한 어플리..

개요이번 주제는 Flutter web을 빌드할 때 사용하는 --web-renderer의 대표적인 두 가지 옵션 html, canvaskit에 대해 알아보려고 한다.이번 주제에서는 가장 많이 사용되는 렌더러를 제외한 wasm은 보통 렌더러라고 하지 않아 이번 글에서는 논하지 않도록 하겠다.얼마 전에 플러터의 애니메이션을 최대한 활용한 플러터 웹을 만들고 있었다.개발용 PC의 성능이 좋아 최대한의 기능을 활용하여 몹시 아름다운 동적 웹사이트를 만드려고 했다.그리고 중간정도 완성을 한 후 배포 테스트를 위해 서버 PC에 있는 Nginx를 이용해 배포를 했다. 예상대로 내가 주로 사용하는 맥미니에서 배포된 웹사이트로 접근했을 때 개발할 때와 같은 모습으로 잘 렌더링이 되었다.하지만 내가 가지고 있던 기기 중 성..