본문 바로가기

분류 전체보기52

[Flutter 트랙] 앱개발 종합반 2-7 - Container Flutter Container 위젯Container 위젯은 **플러터에서 가장 기본적인 레이아웃 구성 요소** 중 하나입니다. 이 위젯을 사용하여 **크기, 색상, 패딩, 마진, 그림자, 테두리 둥글기 등 다양한 스타일**을 적용할 수 있습니다.1. Container 기본 개념Container 위젯은 **레이아웃을 감싸는 박스형 위젯**으로, 내부에 차일드(child) 위젯을 포함할 수 있습니다.Container 기본 예제import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: ContainerExample()));}class ContainerExample extends StatelessWidget { @ove.. 2025. 3. 4.
[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.

티스토리툴바