안드개발자의 좌충우돌 프로젝트 기록

📚 Flutter 위젯 시리즈: Sliver & CustomScrollView 완전 정복

대부분의 Flutter 초보자들은 ListView나 GridView로 스크롤 UI를 충분히 처리할 수 있습니다.그런데 앱이 복잡해지고 다양한 스크롤 UI를 하나로 합칠 때는 CustomScrollView와 Sliver 위젯이 필요해집니다.✅ 1. Sliver란?Sliver는 스크롤 가능한 영역의 일부분을 의미합니다.쉽게 말해, CustomScrollView 안에 들어가는 스크롤 블록 단위라고 생각하면 됩니다. SliverAppBar: 스크롤 시 접히는 AppBar SliverList: 스크롤 가능한 리스트 SliverGrid: 스크롤 가능한 그리드 SliverToBoxAdapter: 일반 위젯과 Sliver 섞기✅ 2. CustomScrollView 기본 구조CustomScrollView( sl..

📚 Flutter 위젯 시리즈: GridView 완전 정복

Flutter에서 이미지 갤러리, 상품 목록, 카드 뷰 등 격자 형태 레이아웃이 필요할 때 가장 많이 쓰는 위젯이 GridView입니다.이번 글에서는 GridView의 기본 구조부터 다양한 구현 방법까지 한 번에 정리합니다.✅ 1. GridView 기본 구조GridView는 리스트 뷰와 달리, 한 행에 여러 아이템을 가로로 배치할 수 있습니다.GridView.count( crossAxisCount: 2, // 한 줄에 2개씩 children: [ Container(color: Colors.red, height: 100), Container(color: Colors.blue, height: 100), Container(color: Colors.green, height: 100), ..

📚 Flutter 위젯 시리즈 7편: Stack & Positioned 완전 정복

Flutter로 겹치는 UI를 만들 때 가장 많이 쓰는 위젯이 Stack입니다.여기에 Positioned 위젯을 함께 쓰면, 원하는 위치에 자유롭게 배치할 수 있죠.✅ 1. Stack 기본 구조Stack은 자식 위젯들을 위로 쌓아올리는 레이아웃입니다.HTML로 치면 position: absolute과 비슷한 개념이죠.Stack( children: [ Container(width: 200, height: 200, color: Colors.blue), Container(width: 150, height: 150, color: Colors.red), Container(width: 100, height: 100, color: Colors.yellow), ],)✔️ 위에서부터 순서대로 쌓입니다..

🖼️ Flutter 위젯 시리즈 6편: Image 위젯 완전 정복Flutter에서 이미지는 앱 디자인 완성도를 높이는 핵심 요소입니다.하나의 Image 위젯으로 애셋, 네트워크, 캐시까지 모두 처리할 수 있죠.✅ 1. 로컬 애셋 이미지Image.asset은 앱에 포함된 로고, 아이콘을 표시할 때 사용됩니다.# pubspec.yaml 예시flutter: assets: - assets/images/logo.pngImage.asset( 'assets/images/logo.png', width: 120,)✔️ 네트워크 연결이 없어도 즉시 로딩됩니다.✅ 2. 네트워크 이미지외부 서버의 이미지를 가져오려면 Image.network를 사용합니다.Image.network( 'https://picsum.p..

Flutter에서 사용자 인터랙션을 처리할 때 가장 자주 사용하는 위젯은 ElevatedButton과 GestureDetector입니다.각각 버튼 UI와 터치 이벤트 처리에 특화된 기능을 제공합니다.🎯 ElevatedButton 기본 사용법ElevatedButton( onPressed: () { print('버튼이 눌렸어요!'); }, child: Text('눌러보세요'),)기본적으로 눌렀을 때 콜백 실행이 가능한 버튼입니다.Flutter 2 이후 ElevatedButton, TextButton, OutlinedButton으로 통합되었습니다.---🎨 스타일 커스터마이징ElevatedButton( onPressed: () {}, style: ElevatedButton.styleFrom( ..

스크롤 가능한 리스트 UI를 만들고 싶을 때 가장 많이 쓰는 위젯이 바로 ListView입니다.Flutter에서는 간단한 텍스트 목록부터 무한 스크롤까지 다양한 리스트 구성이 가능합니다.📌 기본 사용법ListView( children: [ ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ListTile(title: Text('Item 3')), ],)가장 기본적인 정적 리스트 구성입니다.---🔁 동적 리스트 만들기 – ListView.builder많은 아이템을 효율적으로 렌더링하려면 builder 생성자를 사용합니다.ListView.builder( itemCount: items.length, itemBuild..

Flutter에서 레이아웃을 만들 때 가장 핵심이 되는 두 가지 위젯이 있습니다.바로 Row와 Column입니다. 가로/세로 방향으로 위젯을 배치할 수 있는 UI의 골격이죠.🔀 기본 개념 Row: 위젯을 가로 방향으로 배치 Column: 위젯을 세로 방향으로 배치Row( children: [ Text('A'), Text('B'), Text('C'), ],)Column( children: [ Text('1'), Text('2'), Text('3'), ],)---🎯 정렬 옵션: MainAxis vs CrossAxis 속성 Row 기준 Column 기준 mainAxisAlignment 가로 방향 정렬 세로 방향 정렬 ..

Container는 Flutter에서 가장 많이 쓰이는 레이아웃 위젯 중 하나입니다.크기, 색상, 패딩, 마진, 테두리 등 모든 레이아웃의 기본이 되는 위젯이에요.📌 기본 사용법Container( width: 200, height: 100, color: Colors.blue, child: Text('Hello Container'),)→ 가로 200, 세로 100의 파란 박스 안에 텍스트가 출력됩니다.---🎨 스타일 속성 살펴보기Container 주요 속성들: width, height: 크기 지정 padding: 안쪽 여백 margin: 바깥쪽 여백 color: 배경 색 decoration: 테두리, 그림자 등 alignment: 내부 child 정렬---💡 예제: 스타일 적용Con..

Flutter에서 가장 많이 사용되는 위젯 중 하나인 Text 위젯은모든 화면에 글자를 출력하는 데 사용됩니다. 오늘은 Text 위젯의 기본 사용법부터 스타일링까지 알아봅니다.🔤 기본 사용법Text('Hello Flutter!');단순한 문자열을 출력하는 가장 기본적인 형태입니다.---🎨 스타일 적용하기Text( 'Hello Flutter!', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue, ),);TextStyle 주요 속성: fontSize: 글자 크기 fontWeight: 굵기 (bold 등) color: 색상 letterSpacing: 글자 간격 fontFamily:..

Flutter는 UI 애니메이션 구현이 매우 강력한 프레임워크입니다.이번 글에서는 실무에서 자주 사용하는 3가지 애니메이션 방식을 쉽게 정리해 드릴게요.1️⃣ Implicit Animation (암시적 애니메이션)기본 위젯에서 간단하게 애니메이션 효과를 주고 싶을 때 사용합니다.예: AnimatedContainer, AnimatedOpacity, AnimatedAlign 등AnimatedContainer( duration: Duration(milliseconds: 500), curve: Curves.easeInOut, width: isExpanded ? 200 : 100, height: 100, color: isExpanded ? Colors.blue : Colors.grey,)장점: 복잡한 컨..