🐋 Flutter

개요얼마 전에 플러터로 동글동글한 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를 이용해 배포를 했다. 예상대로 내가 주로 사용하는 맥미니에서 배포된 웹사이트로 접근했을 때 개발할 때와 같은 모습으로 잘 렌더링이 되었다.하지만 내가 가지고 있던 기기 중 성..

개요서버용 라즈베리파이에 Code-Server를 설치한 후 코딩에 대한 제약 사항이 많이 개선되었다.아이패드에서 내 개인 Code-Server로 접속하여 NodeJS API 구현을 하는 등, 개발 취미에 대한 자유도가 많이 높아졌다. (디스코드 봇도 code-server를 통해 성공적으로 구현 완료). Code-Server 만세!!!!요즘에 Flutter Web을 통해 이런저런 실험을 진행하고 있는데, Flutter Web도 Headless-server를 근본으로 포트를 구성하여 Chrome이나 기타 브라우저에서 디버그가 가능하게 구현이 되어있는 듯했다.근데 이 녀석, 만약 외부에 접근할 수 있는 환경이라면, Code-Server를 통해서도 충분히 Flutter 개발이 가능하다면 어떨까?라는 생각이 들어..