본문 바로가기

Widget9

[Flutter 트랙] 앱개발 종합반 2-16 - 스레드 위젯 구성해보기 이번 시간에는 스레드 앱의 위젯을 구성하는 방법을 학습합니다. 지난 시간에 구상한 대로 화면을 구성하고, 레이아웃을 조정하면서 원하는 UI를 완성합니다.1. 프로젝트 생성 및 초기화터미널을 사용하여 프로젝트 생성.lib 폴더 내에 home.dart 파일을 추가하고, 홈 화면을 구성할 준비.필요한 이미지 파일을 assets 폴더에 추가하고 pubspec.yaml에 등록.flutter create thread_appcd thread_appcode .2. 테마 및 에뮬레이터 설정전체적인 스타일을 설정하기 위해 ThemeData를 적용.다크 모드를 기본값으로 설정.MaterialApp( theme: ThemeData( scaffoldBackgroundColor: Colors.black, textTh.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-15 - 대표적인 알람 위젯 화면 구성해보기 이번 시간에는 알람 앱의 대표적인 위젯을 이용하여 화면을 구성해보겠습니다.지난 시간에 기획한 UI를 기반으로 실제 플러터 코드를 작성하고, 레이아웃을 조정하면서 화면을 완성하는 과정입니다.1. 프로젝트 파일 생성 및 초기화main.dart 파일을 초기화하고, 홈 화면을 호출하는 Home 위젯을 생성합니다.lib 폴더 내에 home.dart 파일을 새로 만들고, 기본적인 위젯 구조를 설정합니다.2. 에뮬레이터 실행 및 디버깅 설정플러터 에뮬레이터 또는 실제 디바이스를 연결하여 앱을 실행합니다.디버깅 실행 방법: Start Debugging 또는 Run Without Debugging 중 선택하여 실행.디버깅을 통해 실시간 코드 변경을 반영하고, 레이아웃 조정이 가능.3. 테마 설정플러터 앱의 전체적인 스타.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-14 - 대표적인 앱 위젯을 통해 화면 구성해보기 이번 시간부터 대표적인 앱 화면을 직접 플러터 위젯을 이용해 구성하는 실습을 진행합니다.우리가 선택한 앱은 알람 앱과 스레드 앱입니다. 지난 시간에 분석했던 UI 구조를 바탕으로 화면을 구현해보겠습니다.중요한 점은 클론 코딩이 아니라는 점입니다. 기능을 완전히 구현하는 것이 아니라 위젯을 배치하여 비슷한 화면을 구성하는 것이 목표입니다.1. 프로젝트 생성하기플러터 프로젝트를 생성하는 방법은 두 가지가 있습니다:터미널을 이용한 방법VS Code(또는 다른 IDE)를 이용한 방법1-1. 터미널을 이용한 방법# 터미널을 열고 아래 명령어 실행flutter create alarm_app_samplecd alarm_app_sample이 명령어를 실행하면 alarm_app_sample이라는 폴더에 플러터 프로젝트가.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-12 - 기능성 위젯 이번 시간에는 기능성 위젯에 대해 살펴보겠습니다. 기능성 위젯은 UI의 다양한 요소에 동적인 기능을 추가하는 데 사용됩니다.1. 텍스트(Text) 위젯텍스트 위젯은 글씨를 표현하는 기본적인 위젯입니다.Text( "Hello, Flutter!", style: TextStyle( fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold, letterSpacing: 2.0, decoration: TextDecoration.underline, ),)➡️ 위 코드에서는 **24px 폰트 크기, 파란색, 볼드, 자간(2px), 밑줄**이 적용된 텍스트가 표시됩니다.2. 입력 필드(TextField) 위젯TextField 위젯은 사.. 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.