Flutter는 뛰어난 성능과 부드러운 애니메이션을 제공하는 UI 프레임워크입니다. 이러한 성능을 유지하기 위해 내부적으로 렌더링 파이프라인을 활용하는데, 이 과정은 크게 Build → Layout → Paint 단계로 나뉩니다.이번 글에서는 그중에서도 첫 번째 과정인 Build 단계에 대해 자세히 알아보겠습니다. 이 단계에서는 화면을 구성하는 위젯 트리(Widget Tree) 를 생성하며, 상태 변화가 발생할 때마다 빌드가 다시 실행됩니다.1. Flutter의 렌더링 파이프라인Flutter에서 UI가 화면에 표시되는 과정은 다음 세 단계로 진행됩니다.Build 단계: 위젯 트리를 생성하고 업데이트하는 단계입니다.Layout 단계: 위젯의 크기와 위치를 계산하는 과정입니다.Paint 단계: 실제 화면에 ..

Flutter를 활용하여 배너 UI를 구현하고, 배너 전환 애니메이션까지 적용한 과정을 공유합니다. 이번 작업에서는 반응형 디자인과 자연스러운 사용자 경험을 위해 애니메이션 효과를 추가하고, UI 구조를 체계적으로 구성했습니다.구현 목표상단 제목과 날짜 표시: 배너의 상단에 텍스트 형태로 제목과 날짜를 표시.하단 반투명 배경과 버튼: 하단에는 반투명한 검정 배경 위에 "글자" 버튼과 숫자 수를 표시.반응형 UI: 다양한 화면 크기를 지원하기 위해 ScreenUtil을 적용.애니메이션 효과: 배너 전환 시 자연스러운 애니메이션 적용.import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart..