전체보기

🎨 What I Designed직접 구현안 버튼 바운싱 효과와 토스앱에 구현된 버튼 효과 비교 https://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/02/10.dart flutter_ui_lab/lib/2025/02/10.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made ItBoxShadow를 이용한 Shadow 효과이전 게시글에서 Bouncing 효과를 ShadowBox로 구현했었다. 하지만 이 방식은 마치 그림을 덧칠하듯이 Material 시스템..

소켓 통신 코드를 구현하면서 Either에 담을 결과값으로 Unit을 넣었다. Unit 타입을 사용한 이유는 리턴값은 없지만 성공적으로 함수를 실행했다는 정보를 받고 싶었기 때문이다. 그렇다면 void를 쓸 수도 있을텐데 왜 Unit을 써야할까?  Unit 타입이란?unit이라는 네이밍은 "단 하나의 값"만을 가진다는 특성에서 유래되었다. unit타입의 모든 값은 동일하며 그 자체로 어떤 정보를 표현하지는 않는다.   카테고리 이론에서 unit 타입은 종단객체(terminal object)이다. 종단객체는 모든 객체에서 단 하나의 방향으로 가는 화살표,  보편적인 끝을 찾고싶을 때의 사상(morphism)을 표현하기 위해 사용한다. 이를 프로그래밍에서는 "결과값이 필요없는 함수의 반환타입"으로 활용하는 ..

플러터에서 위젯은 크게 두가지 종류 StatlessWidget 과 StatefulWidget이 있다. 많은 블로그에서는 단순히 두 차이에 대해서만 기술해놓고 있을 뿐 어느상황에서 어떤 위젯을 선택해야하는지는 다루는 글이 없는 것 같아 적어보았다. “상태가 변화하는 위젯이라면 무조건 StatefulWidget을 써야 하는 것 아닌가?"사실, Flutter의 페인팅 시스템과 Diffing(Reconciliation) 메커니즘 덕분에, 외부에서 상태가 주입되는 경우(예: Provider, Bloc 등)에도 StatelessWidget만으로 충분히 UI를 업데이트할 수 있다. 즉, 위젯 자체는 불변성을 유지하며, 부모나 글로벌 상태 관리에서 전달받은 값이 변경되면, 전체 트리의 일부만 효율적으로 다시 그려지게..

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/02/01.dart flutter_ui_lab/lib/2025/02/01.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/31.dart flutter_ui_lab/lib/2025/01/31.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It사용한 주요 위젯: ClipRect, BackdropFilter, ImageFilter What is ClipRect?ClipRect는 자식위젯(child)을 사각형 형태로 클리핑하는 역할을 한다. 화면 전체에 위젯이 있더라도 ClipRect..

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/30.dart flutter_ui_lab/lib/2025/01/30.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It애니메이션 구현 순서1. 먼저 원의 중심을 설정한다.2. 원 테두리를 이루는 점을 설정한다.3. 테두리에 있는 점들의 각도 차이를 계산한다.4. Blob의 기본 반지름을 설정한다.5. 테두리의 점들을 출렁이게한다. (Sin함수 이용)6. 출렁..

🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/29.dart flutter_ui_lab/lib/2025/01/29.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎  How I Made It사용된 주요 위젯: Container, BoxDecoration, BoxShadow What is Container?A container first surrounds the child with padding and then applies ad..

🧐 문제상황 매일 새벽 5시마다 플러터 프로젝트 develop 브랜치에서 단위테스트를 실행시키고자 했다. 1. 이를 위해 EC2에 도커로 젠킨스를 배포했다.2. Flutter 는 Docker Hub 에 마땅한 이미지가 없어서 (개인이 올려놓은 플러터 이미지가 있긴했는데 스타수가 워낙 낮아 신뢰하기 어려웠다.) EC2 로컬에 직접 설치한상태였다. 이 상태에서 파이프라인 스크립트를 작성하고 build 를 해보았더니 젠킨스가 flutter 파일을 찾지못하고 failure해버리는 이슈가 발생했다.☺️ 문제 원인 분석 및 해결Jenkins가 Docker 컨테이너로 실행되면, 컨테이너는 자체 격리된 파일 시스템을 사용한다. 따라서, EC2 로컬에 설치된 Flutter와 Android SDK 경로를 인식하지 못하고..

최근 함수형 프로그래밍을 연습하던중 비동기 데이터를 받는 함수를 평소 사용하는 Future 대신 Task로 사용하는 것이 좀더 함수형 스타일에 가깝다는 것을 알게되었다.  Future야 머.. 너무 많이 쓰이고 다른 언어에도 다 있는거라 당연하다고 치지만 Task..? 이건 Swift Concurrency 에서 보고 다른 언어 쓸 땐 못봤던 네이밍인데 이게 왜 Future 대신 함수형 프로그래밍에서 쓰이는거지..? 라는 궁금증이 생겼다. 그래서 코드를 작성해보고 로그를 확인해보니, Future와 Task의 차이에 대해 확실히 알게되었다.   위 코드를 통해 알 수 있는 차이점실행 시점함수 호출 시 즉시 실행.run() 호출 시 실행.로그의 순서fetchNumber 호출 직후 "Fetching number..

네비게이션 탭바를 Stateful 위젯으로 만들어 탭할시 파란색 아이콘 이미지로 바꿀 수 있었으나가급적 Stateless 위젯을 사용하여 최적화 시키고 싶었다.Statless 위젯을 사용하면서 이미지의 색을 바꾸는 방법에 대해 알아보자.배경 지식참고링크: https://api.flutter.dev/flutter/dart-ui/BlendMode.html Flutter의 UI렌더링 과정 이해하기 Flutter의 UI렌더링 과정은 아래와 같다개발자가 작성한 코드를 통해 위젯 트리가 생성된다.위젯 트리가 빌드된 후, Flutter는 상태와 위젯트리 생명주기를 관리하는 Element Tree, 그리고 위젯의 위치와 크기 정보를 가지고 있는 Render Tree를 만든다.상위위젯부터 하위위젯까지 제약조건이 잡히고,..