전체보기

유저의 액션이 어떻게 UI에 렌더링될까? 먼저 큰 그림부터 살펴보자 플러터 아키텍쳐는 위와 같이 세가지 레이어로 이루어져있다. 먼저 Embedder Layer는 플러터앱을 각 플랫폼별 OS에 띄우도록 브릿징하는 역할을 수행한다. 따라서 이부분은 플랫폼별 언어(자바, 옵젝씨, c++)로 작성되어 있다. Engine Layer는 플러터의 저수준엔진으로 C++ 언어로 작성되어 그래픽,텍스트등의 렌더링을 수행한다. 이곳에는 우리가 접하는 dart:ui도 있는데 C++ 코드를 다트로 쉽게 다룰 수 있도록 래핑한 라이브러리이다. 위 그림에서 볼 수 있듯이 우리는 다트로 ui를 렌더링하려면 반드시 저수준 C++코드를 호출해야하고, 이러한 저수준코드를 다트로 호출하려면 dart:ui 를 쓸 수 밖에 없다. 즉,..

문제1. 특정 배열이 주어졌을 때 (ex [1, 2, 3])2. 해당 배열의 subarray 만들기 (ex [1], [2], [3], [1,2], [1,3]..)해결 1. 즉시 평가 방법으로 SubArray 만들기해결 2. 지연 평가 방법으로 SubArray 만들기왜 지연평가를 지향해야할까?생각해보면 두 방법 모두 시간복잡도는 n^2으로 두 번 순회하면서 도는건데 다를게 있나? 라고 생각할 수 있다. 하지만 자세히 살펴보면 먼저 메모리 사용공간에서 차이를 보이게 된다. 즉시평가에서는 result에 모든 subarray를 담게된다. 위 예시를 보았을 때 최종적으로 6개의 배열이 담기는 순간에 return이 호출되고 이를 순회하면서 print되는 것을 확인할 수 있다. 반면 지연평가는 계산 내내 메모리 공간..

예시 상황1. 만약 A 클래스(혹은 위젯)에서 특정 액션이 트리거되면2. B(Stateful Widget) 클래스 내부의 UI가 바뀌어야하는데3. 이때 B 클래스의 State 객체 내부 메서드를 호출해야한다. 이를 코드로 확인해보자면위 코드와 같이 외부클래스/위젯(ParentWidget) 에서는 Stateful 위젯의 Sate객체 메서드에 직접 접근할 수 없다. 당연한 이야기지만 state 클래스는 따로 선언되어있기 때문이다. 하지만 그렇다고 ParentWidget에서 State 인스턴스를 만들어 호출해야할까? 물론 그렇게하면 함수 자체에는 접근할 수 있겠지만 우리가 원하는 위젯의 UI는 단순 State 함수 호출에 의해 바귀지 않는다. 왜냐하면 Widget은 껍데기이고 여기에 업데이트된 내용물(Elem..

🎨 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..