오늘의 주제

• 플러터를 이용한 사용자 인터페이스 개발 기초
• 기본 위젯 활용 방법 학습

오늘의 목표

• 플러터의 기본 위젯들의 사용법을 이해한다.
• 위젯, 엘리멘트 트리를 이해한다.
• State와 State 생명 주기를 학습한다.
• 애셋을 활용하는 방법을 익힌다.
• 텍스트, 이미지, 아이콘, 버튼 등 주요 위젯들의 특성을 파악한다.
• 컨테이너와 센터 위젯을 활용한 레이아웃 구성 방법을 학습한다.

오늘의 미션

1. 위젯트리 이해하기

   • 화면과 관련된 모든 것이 위젯

     • 보이는 위젯
     • 보이지 않는 위젯

   • runApp() 함수에 전달된 위젯을 루트로 화면을 덮고, 이 루트 위젯을 기반으로 위젯트리를 만든다.

   • (미션)아래 코드의 위젯 클래스가 조합해서 반환하는 위젯 트리를 출력해보자.

     <aside> 🤔 VS code에서 Widget Inspector는, 디버깅 실행 시, 커맨드 프롬프트 창에서 widget inspect를 실행하면 켜집니다.

     

     

     </aside>

     import 'package:flutter/material.dart';
     void main() {
     	runApp (MyApp());
     }
     class MyApp extends StatelessWidget {
     	@override
     	Widget build(BuildContext context) {
     		return MaterialApp(
     			home: Scaffold(
     				appBar: AppBar(
     					title: Text('Test'),
     				),
     			body: Center(
     				child: GestureDetector(
     					child: Text(HelloWorld'))),
     			),
     		);
     	}
     }
     

   • (답을 여기에 작성)

2. StatelessWidget과 StatefulWidget
   • (미션)화면을 재구성하기 위한 build 함수를 여러번 사용할 수 있는 StatefulWidget 클래스를 상속받은 위젯은 언제 build가 재실행되나요?
   • (답을 여기에 작성)
   • (미션)State의 생명 주기에 대해 정리해보세요.
   • (답을 여기에 작성)
3. 위젯에 대해서 알아보기
   • 위젯 정보를 나타내는 BuildContext 객체는 엘리멘트와 유사하며, 위젯의 정보들이 담긴다.
   • 위젯을 식별하는 key
4. 애셋 활용하기
   • 애셋의 개념과 등록 방법 이해하기
   • pubspec.yaml 파일에 애셋 등록하기
   • 이미지, 텍스트 파일 등 다양한 유형의 애셋 활용해보기
   • (미션) 프로젝트에 이미지 애셋을 추가하고 화면에 표시해보세요.
   • (답을 여기에 작성)
5. 텍스트 위젯 활용하기
   • Text 위젯의 기본 사용법 익히기
   • 텍스트 정렬, 스타일 지정, 줄 수 제한 등 다양한 속성 활용하기
   • (미션) "Hello, Flutter!" 텍스트를 빨간색, 굵은 글씨, 가운데 정렬로 표시해보세요.
   • (답을 여기에 작성)
6. 이미지 위젯 사용하기
   • Image 위젯의 다양한 생성자 이해하기 (asset, network, file 등)
   • BoxFit을 이용한 이미지 채우기 옵션 활용
   • (미션) 네트워크 이미지를 불러와 화면에 표시하고, fit 옵션을 적용해보세요.
   • (답을 여기에 작성)
7. 아이콘과 아이콘 버튼 사용하기
   • Icon 위젯 사용법 익히기
   • IconButton을 이용한 클릭 가능한 아이콘 만들기
   • FontAwesomeIcons 패키지 활용하기
   • (미션) heart 아이콘을 만들고, 클릭 시 콘솔에 메시지를 출력하는 기능을 구현해보세요.
   • (답을 여기에 작성)
8. 제스처 감지기와 엘리베이트 버튼 활용하기
   • GestureDetector 위젯의 다양한 이벤트 처리 방법 학습
   • ElevatedButton 사용법과 스타일 지정 방법 익히기
   • (미션) GestureDetector를 사용하여 이미지를 탭했을 때 알림 대화상자를 표시해보세요.
   • (답을 여기에 작성)
9. 컨테이너와 센터 위젯 이해하기
   • Container 위젯의 다양한 속성 활용 (margin, padding, decoration 등)
   • Center 위젯을 이용한 콘텐츠 정렬
   • (미션) Container를 사용하여 둥근 모서리의 박스를 만들고, 그 안에 텍스트를 중앙 정렬하여 배치해보세요.
   • (답을 여기에 작성)

오늘의 회고

• 오늘 학습한 내용 중 가장 유용했던 점:
• 어려웠던 부분과 해결 방법:
• 앞으로 더 학습이 필요한 부분:
• 학습한 내용을 실제 프로젝트에 어떻게 적용할 수 있을지: