본문 바로가기

Flutter + Dart/Flutter + Dart 공부24

스크롤과 페이지 네비게이션 가이드 ✅ 스크롤 관련 속성 및 메서드 분류 항목 설명 위젯ListView, SingleChildScrollView, CustomScrollView스크롤 가능한 레이아웃속성physics스크롤 동작을 제어하는 물리 법칙 설정controller스크롤 위치/이벤트 제어용 ScrollControllerscrollDirection스크롤 방향 설정 (Axis.vertical, Axis.horizontal)primary기본 스크롤 컨트롤러 사용 여부 (보통 NestedView에서 false)shrinkWrap내부 내용에 맞춰 크기 줄일지 여부physics 종류AlwaysScrollableScrollPhysics항상 스크롤 가능NeverScrollableScrollPhysics스크롤 불가BouncingScrollPhysi.. 2025. 5. 14.
리스트뷰 및 그리드뷰 학습, 상태 관리 소개 (StatefulWidget) 스크롤, 화면 안에서 (목록)페이지넘기기📱 ListView, GridView, StatefulWidget, Provider 상태관리 관련 주요 명령 ✅ ListView 주요 명령어 및 설명 명령어 / 클래스 설명 특징 / 활용 시기 ListView.builder항목을 필요할 때마다 생성데이터 많을 때 효율적ListView.separated항목 사이 구분선 또는 위젯 삽입일정 간격 또는 Divider 삽입에 유리ListView.custom사용자 정의 슬리버로 구성된 고성능 리스트복잡한 커스터마이징에 적합itemCount리스트 항목 수builder, separated에서 필수itemBuilder각 항목 위젯 빌드 함수반복 구조에 사용separatorBuilder리스트 항목 사이 위젯 정의ListView.s.. 2025. 5. 14.
화면 전환 (Navigator) 기초 학습 페이지 이동 한 파일 내에서 다른 파일의 화면으로 이동하기 학습 목표Flutter의 기본 내비게이션(Navigator) 개념 이해화면 간 이동(push, pop) 구현MaterialPageRoute와 Named Route 설정 방법 학습간단한 데이터 전달(Arguments) 준비1. 프로젝트 준비Flutter 프로젝트 생성pubspec.yaml에 특별한 패키지 추가는 필요 없고, 기본 material 위젯 사용2. 화면 구성기본 화면(메인) 일기 작성 화면 상세 화면(DetailPage) 🛠 예제 코드1. MaterialApp 설정import 'pa.. 2025. 5. 14.
비동기 및 특수 위젯 🎯 학습 목표다양한 특수 위젯(FutureBuilder, StreamBuilder, TabBar, PageView 등)의 동작 원리 이해비동기 데이터를 활용한 UI 구성 능력 향상탭 전환 및 슬라이드 UI 구현 능력 습득복잡한 위젯 조합을 통한 실전 앱 UI 설계 경험🔹 FutureBuilder✅ 개념 정리FutureBuilder는 Future 객체의 상태 변화에 따라 UI를 자동으로 갱신해주는 위젯입니다.비동기 작업의 결과를 기다릴 때 로딩 스피너, 성공/실패 메시지를 표시하는 데 사용됩니다.⚠️ 주의: future는 build() 함수 내부가 아닌, initState() 등 외부에서 선언해야 불필요한 재빌드를 방지할 수 있습니다.🔧 주요 속성속성설명future감시할 Future 객체builder.. 2025. 5. 14.
기본 위젯 학습 및 사용자 입력 처리 기초 학습 목표기본 위젯 학습 및 사용자 입력 처리 기초간단한 UI 앱 개발 실습 (텍스트 출력, 버튼 클릭 이벤트 처리, 입력 값 활용 등)학습 내용1. Text: 텍스트 표시 및 스타일링설명:Text 위젯은 화면에 글자를 표시할 때 사용합니다. 글자의 폰트 크기, 두께, 색상 등을 설정할 수 있어 앱의 분위기에 맞게 스타일을 적용할 수 있습니다.예시 코드:Text( '안녕하세요, Flutter!', style: TextStyle( fontSize: 24, // 글자 크기 fontWeight: FontWeight.bold, // 굵기 조절 color: Colors.blue, // 글자 색상 ),)2. Image: 이미지 표시 (assets, network)설명:Image 위젯은 앱 내에.. 2025. 5. 13.
위젯과 기본적인 레이아웃 학습 목표Flutter 위젯 소개 및 기본적인 레이아웃 학습Flutter Hot Reload/Restart 기능 이해 및 활용학습 내용1. Flutter 위젯 트리 구조 이해Flutter 앱의 화면은 위젯(Widget)이라는 작은 UI 구성 요소들의 조합으로 만들어집니다. 마치 나무가 가지와 잎으로 이루어진 것처럼, Flutter 앱도 여러 위젯들이 서로 연결되어 위젯 트리(Widget Tree)라는 구조를 형성합니다.부모 위젯(Parent Widget): 다른 위젯들을 포함하는 위젯입니다.자식 위젯(Child Widget): 부모 위젯 안에 포함된 위젯입니다. 하나의 자식 위젯을 가질 수도 있고 (child 속성), 여러 개의 자식 위젯을 가질 수도 있습니다 (children 속성).Flutter 앱이.. 2025. 5. 12.