본문 바로가기

alarm2

[Flutter 트랙] 앱개발 종합반 2-15 - 대표적인 알람 위젯 화면 구성해보기 이번 시간에는 알람 앱의 대표적인 위젯을 이용하여 화면을 구성해보겠습니다.지난 시간에 기획한 UI를 기반으로 실제 플러터 코드를 작성하고, 레이아웃을 조정하면서 화면을 완성하는 과정입니다.1. 프로젝트 파일 생성 및 초기화main.dart 파일을 초기화하고, 홈 화면을 호출하는 Home 위젯을 생성합니다.lib 폴더 내에 home.dart 파일을 새로 만들고, 기본적인 위젯 구조를 설정합니다.2. 에뮬레이터 실행 및 디버깅 설정플러터 에뮬레이터 또는 실제 디바이스를 연결하여 앱을 실행합니다.디버깅 실행 방법: Start Debugging 또는 Run Without Debugging 중 선택하여 실행.디버깅을 통해 실시간 코드 변경을 반영하고, 레이아웃 조정이 가능.3. 테마 설정플러터 앱의 전체적인 스타.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-13 - 대표적인 위젯 분석 이번 시간에는 대표적인 앱 화면을 플러터 위젯으로 해석하는 방법에 대해 살펴보겠습니다.대중적인 앱들은 사용자 경험(UX)과 UI 설계에 많은 고민이 반영된 결과물입니다. 이러한 앱의 화면을 플러터로 구현할 수 있도록 분석하는 연습을 진행하겠습니다.1. 틱톡(TikTok) UI 분석틱톡의 메인 화면은 다음과 같은 요소로 구성됩니다:페이지 뷰(PageView): 위아래로 스와이프하여 동영상을 전환.AppBar: 상단의 고정된 팔로잉/추천 탭과 검색 아이콘.Row: 상단의 팔로잉과 추천 메뉴는 가로 정렬.GestureDetector: 탭 메뉴를 클릭할 수 있도록 설정.Stack & Positioned: 화면 위에 겹쳐진 요소(좋아요, 댓글, 공유 버튼 등).Column: 동영상 설명과 사용자 정보 정렬.Pag.. 2025. 3. 5.