본문 바로가기

전체 글373

[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.
[Flutter 트랙] 앱개발 종합반 1-14 - 클래스 객체 Flutter 클래스 및 객체 개념 정리이번 포스팅에서는 Flutter에서 클래스(Class)와 객체(Object)의 개념을 배우고, 이를 활용하여 게임 프로젝트를 리팩토링하는 방법을 설명합니다.1. 클래스(Class)란?클래스는 객체(Object)를 만들기 위한 설계도입니다. Flutter에서 UI 요소뿐만 아니라 게임 캐릭터, 사용자 정보, 설정 값 등을 클래스로 정의할 수 있습니다.📌 클래스 기본 구조class 클래스명 { // 멤버 변수 (속성) 타입 변수명; // 생성자 클래스명(this.변수명); // 메서드 (기능) void 함수명() { // 실행할 코드 }}📌 클래스 예제: 인간(Human) 객체 만들기class Human { f.. 2025. 3. 4.
[Flutter 트랙] 앱개발 종합반 1-13 - Widget Tree 위젯 트리 Flutter 위젯 트리 개념 및 상태 관리 적용하기이번 포스팅에서는 Flutter 개발을 위한 위젯 트리(WIDGET TREE) 개념과 상태(State) 관리 방식을 살펴보고, 이를 활용하여 게임 프로젝트에서 UI를 효율적으로 업데이트하는 방법을 정리합니다.1. 위젯 트리(WIDGET TREE)란?Flutter에서 모든 화면 요소는 위젯(Widget)으로 구성되며, 이 위젯들은 계층 구조(Tree 구조)로 연결됩니다.📌 위젯 트리 구조Flutter 앱은 최상단의 부모 위젯부터 하위 위젯을 계층적으로 포함하는 구조특정 위젯이 변경되면 그 위젯과 관련된 하위 위젯만 다시 렌더링불필요한 전체 UI 업데이트를 줄여 **성능 최적화** 가능📌 위젯 트리 예시 (카드 게임 앱)MyApp (최상위 위젯) ├──.. 2025. 3. 4.

티스토리툴바