본문 바로가기

전체 글373

[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-13 - 대표적인 위젯 분석 이번 시간에는 대표적인 앱 화면을 플러터 위젯으로 해석하는 방법에 대해 살펴보겠습니다.대중적인 앱들은 사용자 경험(UX)과 UI 설계에 많은 고민이 반영된 결과물입니다. 이러한 앱의 화면을 플러터로 구현할 수 있도록 분석하는 연습을 진행하겠습니다.1. 틱톡(TikTok) UI 분석틱톡의 메인 화면은 다음과 같은 요소로 구성됩니다:페이지 뷰(PageView): 위아래로 스와이프하여 동영상을 전환.AppBar: 상단의 고정된 팔로잉/추천 탭과 검색 아이콘.Row: 상단의 팔로잉과 추천 메뉴는 가로 정렬.GestureDetector: 탭 메뉴를 클릭할 수 있도록 설정.Stack & Positioned: 화면 위에 겹쳐진 요소(좋아요, 댓글, 공유 버튼 등).Column: 동영상 설명과 사용자 정보 정렬.Pag.. 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-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.

티스토리툴바