본문 바로가기

스파르타 코딩 클럽 내일배움캠프 6기52

[Flutter 트랙] 앱개발 종합반 2-11 - Stack & Positioned 이번 시간에는 Stack과 Positioned 위젯에 대해 살펴보겠습니다.Stack 위젯은 **위젯을 겹쳐서 배치할 때** 사용됩니다. 여러 개의 위젯을 레이어 형태로 배치할 수 있으며, 이를 통해 프로필 이미지 위에 아이콘을 배치하는 등의 UI를 만들 수 있습니다.1. Stack 기본 사용Stack 위젯을 사용하면 **자식 위젯들을 위로 쌓아 올릴 수 있습니다.**Stack( children: [ Container( width: 200, height: 200, color: Colors.blue, ), Container( width: 100, height: 100, color: Colors.red, ), ],)➡️ **위 코드.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-10 - Expanded 이번 시간에는 Expanded 위젯을 살펴보겠습니다.Expanded 위젯은 Row 또는 Column 내부에서 사용되며, **남은 공간을 자동으로 채우는 기능**을 합니다.이 위젯을 활용하면, UI의 크기를 **동적으로 조정**하면서도 원하는 비율로 배분할 수 있습니다.1. 기본적인 Expanded 사용다음 예제는 **Row** 내부에서 Expanded 위젯을 사용하여 화면의 가로 공간을 자동으로 분배하는 방식입니다.Row( children: [ Expanded( child: Container(height: 50, color: Colors.red), ), Expanded( child: Container(height: 50, color: Colors.green), ).. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-9 - Row Column 이번 시간에는 Flutter에서 가장 많이 사용되는 레이아웃 위젯인 Row와 Column 위젯을 살펴보겠습니다.이 두 가지 위젯을 잘 활용하면 거의 모든 UI 구성이 가능합니다.1. Row 위젯Row 위젯은 **가로 방향**으로 위젯들을 배치하는 데 사용됩니다.Row( children: [ Container(width: 40, height: 40, color: Colors.red), Container(width: 40, height: 40, color: Colors.green), Container(width: 40, height: 40, color: Colors.blue), ],)위 코드를 실행하면 **가로로 정렬된 박스** 3개가 나타납니다.2. Row의 정렬 옵션 (MainAxis.. 2025. 3. 5.
[📅 2025.03.04] Day 2: Flutter UI 위젯 & 앱 화면 구성 📅 총 16강 (3시간 35분)1. Stateful & Stateless 위젯 이해StatelessWidget: 변하지 않는 UI 구성StatefulWidget: 사용자 입력 및 상태 변화 감지2. 주요 뷰(View) 위젯 학습PageView: 페이지 넘기기 (스와이프 가능)ListView: 스크롤 가능한 리스트 UIGridView: 격자형 UITabBarView: 탭 기반 UI3. 레이아웃 구성 위젯 학습Container: 크기, 색상, 배경 설정 가능SizedBox: 여백 및 크기 조정Row & Column: 가로/세로 정렬Expanded: 공간을 유동적으로 조정Stack & Positioned: 겹쳐진 UI 구현4. 기능성 위젯 학습GestureDetector: 터치 이벤트 감지AnimatedCo.. 2025. 3. 4.
[📅 2025.03.03] Day 1: Flutter 기본 개념 & 개발 환경 설정 🗓 Day 1: Flutter 기본 개념 & 개발 환경 설정📅 총 15강 (3시간 28분)1. Flutter 개요 및 개발 환경 설정Flutter의 필요성: 크로스플랫폼 개발 가능, 성능 우수, 빠른 UI 빌드Windows & Mac 개발 환경 설정:Flutter SDK, Android Studio, VS Code 설치Mac의 경우 추가적으로 iOS 개발 환경 설정 필요VS Code 확장 플러그인 (Flutter, Dart) 설치2. Flutter 프로젝트 기본 실행VS Code에서 Flutter 프로젝트 생성 및 실행flutter create 프로젝트명 → main.dart 실행3. Dart 기본 문법 학습변수 선언 (var, final, const)반복문 (for, while, do-while)함.. 2025. 3. 4.
[Flutter 트랙] 앱개발 종합반 2-8 - Sized Box Flutter SizedBox 위젯이번 시간에는 Flutter에서 위젯 간의 간격을 조정할 때 유용하게 사용되는 SizedBox 위젯을 살펴보겠습니다.SizedBox는 간단하지만 매우 많이 사용되는 위젯으로, **위젯 사이의 간격을 조절하거나 특정 크기의 빈 공간을 만들 때** 유용합니다.1. SizedBox 기본 사용법SizedBox는 주로 **가로(width)** 또는 **세로(height)** 값을 설정하여 위젯 간 간격을 조정하는 데 사용됩니다.SizedBox(height: 20) // 위아래 간격 20SizedBox(width: 10) // 좌우 간격 102. 위아래 간격 주기두 개의 컨테이너 사이에 **위아래 간격**을 주는 방법을 살펴보겠습니다.Column( children: [ .. 2025. 3. 4.

티스토리툴바