본문 바로가기

전체 글373

[📅 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.
[Flutter 트랙] 앱개발 종합반 2-7 - Container Flutter Container 위젯Container 위젯은 **플러터에서 가장 기본적인 레이아웃 구성 요소** 중 하나입니다. 이 위젯을 사용하여 **크기, 색상, 패딩, 마진, 그림자, 테두리 둥글기 등 다양한 스타일**을 적용할 수 있습니다.1. Container 기본 개념Container 위젯은 **레이아웃을 감싸는 박스형 위젯**으로, 내부에 차일드(child) 위젯을 포함할 수 있습니다.Container 기본 예제import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: ContainerExample()));}class ContainerExample extends StatelessWidget { @ove.. 2025. 3. 4.
[Flutter 트랙] 앱개발 종합반 2-6 - Tapbar Flutter TabBar 위젯TabBar 위젯은 상단에 탭 메뉴를 제공하고, 각 탭을 클릭하면 해당하는 화면(TabBarView)이 전환되는 UI를 제공합니다. 대표적인 사용 사례로는 네이버, 카카오톡, 유튜브 등의 탭 네비게이션이 있습니다.1. TabBar 기본 개념TabBar UI는 3가지 핵심 요소로 구성됩니다.TabController → 탭 전환을 관리하는 컨트롤러TabBar → 상단 메뉴(탭) UITabBarView → 탭에 따라 전환되는 화면TabBar 기본 예제import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: TabBarExample()));}class TabBarExample extends St.. 2025. 3. 4.
[Flutter 트랙] 앱개발 종합반 2-5 - GridView Flutter GridView 위젯GridView 위젯은 격자(그리드) 형태의 UI를 쉽게 구현할 수 있도록 도와줍니다. 대표적인 사용 사례로는 갤러리(사진첩), 상품 목록 등이 있습니다.1. GridView 기본 개념GridView를 사용하면 여러 개의 항목을 격자 형태로 배치할 수 있습니다.GridView 특징격자(그리드) 형태의 UI 제공열 개수 조절 가능가로/세로 방향 조정 가능컨트롤러를 이용하여 특정 위치로 이동 가능GridView 기본 예제import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: GridViewExample()));}class GridViewExample extends StatelessWid.. 2025. 3. 4.

티스토리툴바