본문 바로가기

전체 글51

[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.
[Flutter 트랙] 앱개발 종합반 2-4 - ListView Flutter ListView 위젯ListView 위젯은 스크롤 가능한 리스트 형태의 UI를 구현하는 데 사용됩니다. 대표적인 사용 사례로는 카카오톡 친구 목록, 쿠팡 상품 리스트 등이 있습니다.1. ListView 기본 개념ListView를 사용하면 여러 개의 항목을 리스트 형태로 표시하고, 세로 또는 가로로 스크롤할 수 있습니다.ListView 특징스크롤 가능한 리스트 형태 UI 제공가로/세로 방향 조정 가능컨트롤러를 이용하여 특정 위치로 이동 가능캐싱을 활용하여 성능 최적화 가능ListView 기본 예제import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: ListViewExample()));}class Lis.. 2025. 3. 4.
[Flutter 트랙] 앱개발 종합반 2-3 - PageView Flutter PageView 위젯PageView 위젯은 페이지를 스와이프(Swipe)하여 전환하는 기능을 제공합니다. 대표적인 사용 예시는 앱 튜토리얼, 슬라이드 쇼, 카드형 UI 등에서 사용됩니다.1. PageView 기본 개념PageView 위젯을 활용하면 여러 개의 페이지를 가로 또는 세로 방향으로 넘길 수 있습니다.PageView 특징페이지를 가로 또는 세로 방향으로 스와이프 가능무한 페이지 전환, 정지(Snap) 등 다양한 옵션 제공컨트롤러(PageController)를 사용하여 페이지 이동 가능이벤트 감지 (onPageChanged 등) 기능 제공PageView 기본 예제import 'package:flutter/material.dart';void main() { runApp(Mater.. 2025. 3. 4.
[Flutter 트랙] 앱개발 종합반 2-2 - Stateless와 Stateful 위젯 살펴보기 📌 Stateless vs Stateful 위젯 살펴보기Flutter에서 모든 UI 요소는 위젯(Widget)으로 구성됩니다. 이번 강의에서는 StatelessWidget과 StatefulWidget의 개념과 차이점을 학습합니다.1. StatelessWidget (스테이트레스 위젯)StatelessWidget은 한 번 생성되면 변경되지 않는 위젯입니다. 즉, **Immutable(불변)**한 특성을 가지며, **내부 상태를 가질 수 없습니다**.📌 StatelessWidget의 특징상태(State)가 없는 정적 UI를 표현한 번 생성되면 변경되지 않음 (Immutable 특성)빠른 렌더링과 성능 최적화 가능빌드 함수(build())가 한 번만 실행됨📌 StatelessWidget 예제import '.. 2025. 3. 4.
[Flutter 트랙] 앱개발 종합반 2-1 - Flutter 기본기 📌 Flutter 기본기 익히기 (2주차)이번 주차에서는 Flutter의 핵심 개념인 위젯(Widget)과 상태(State) 관리를 익히는 것이 목표입니다.특히, StatelessWidget과 StatefulWidget을 학습하고, 자주 사용되는 뷰(View) 위젯, 레이아웃(Layout) 위젯, 기능성(Functional) 위젯을 살펴보겠습니다.1. Flutter에서 위젯(Widget)이란?Flutter에서 UI의 모든 요소는 위젯(Widget)으로 구성됩니다. 버튼, 이미지, 텍스트, 레이아웃 등 화면에 보이는 모든 것은 위젯입니다.위젯은 크게 StatelessWidget과 StatefulWidget으로 나뉩니다.StatelessWidget - 상태 변화가 없는 정적인 UI 구성StatefulWid.. 2025. 3. 4.

티스토리툴바