Flutter + Dart41 Flutter & Dart DevTools 사용하기 📊 Flutter & Dart DevTools 정리Flutter와 Dart DevTools는 앱의 동작을 분석·디버깅·최적화하는 데 특화된 웹 기반 툴입니다.아래는 DevTools에서 제공하는 주요 기능과 사용 방법입니다.◆ 설치 방법1단계. DevTools 준비하기Flutter SDK 설치Flutter SDK를 설치하면 Dart SDK도 같이 들어있습니다.SDK 안에 DevTools도 포함되어 있으므로 따로 다운로드할 필요는 없습니다.VS Code 또는 Android Studio 설치두 IDE 모두 Flutter 플러그인을 제공하며, DevTools와 연동됩니다.환경 확인모든 체크가 초록 ✅ 이 나오면 준비 완료입니다.flutter doctor2단계. DevTools 실행하기터미널에서 실행실행하면 브.. 2025. 9. 9. 일정화면 만들기 1. 슬라이더 전체 적용하기더보기import 'dart:async';import 'package:flutter/material.dart';import 'package:table_calendar/table_calendar.dart';import 'package:intl/intl.dart' show DateFormat;import '../widgets/profile_menu_widget.dart';// 슬라이더와 빈 박스 배치하기// ScheduleListScreen()class ScheduleListScreen extends StatefulWidget { @override _ScheduleListScreenState createState() => _ScheduleListScreenState();}cla.. 2025. 5. 19. json 파일을 .dart에 변수로 가져오기 .dart 파일에서 외부 JSON 파일(예: schedule_items_30.json)을 읽어 배열 변수(ListMapString, dynamic>>> schedule_item()) 로 가져오는 기본 방법.✅ 1. pubspec.yaml에 assets 등록flutter: assets: - assets/schedule_items_30.json🔸 assets/ 폴더에 schedule_items_30.json 파일을 넣어야 함. 경로가 다르면 수정하기.✅ 2. Dart 코드 작성 (예: load_schedule.dart)import 'dart:convert';import 'package:flutter/services.dart' show rootBundle;Future>> loadScheduleItem.. 2025. 5. 19. 다이어리 위젯 - Diary Screen 📘 Diary Screen 기능별 학습 정리✅ 1. 전체 개요diary_screen.dart는 일기 조회 및 작성 기능을 가진 Flutter 화면 구성 파일이다. 이 화면에서는 사용자의 일기 목록을 보여주고, 추가, 상세보기 등의 동작이 포함된다. (추후 삭제, 수정 추가예정)주요 구성 요소:StatefulWidget 기반 UIFutureBuilder를 활용한 비동기 데이터 처리Dismissible을 이용한 스와이프 삭제네비게이션을 통한 상세 페이지 이동🧱 2. 위젯 구조 및 상태관리핵심 위젯: DiaryScreenclass DiaryScreen extends StatefulWidget { @override _DiaryScreenState createState() => _DiaryScreenSta.. 2025. 5. 19. 위젯 정렬 - 전체 채우기, 좌측 상단 정렬 📌 Flutter에서 자식 위젯을 "전체 확장 + 좌측 상단 정렬"하는 방법 총정리Flutter에서 자식 위젯을 부모 위젯의 전체 크기를 채우면서, 동시에 좌측 상단에 정렬시키려면 다음과 같은 위젯과 속성들을 적절히 조합해야 합니다.✅ 자식 위젯이 부모 영역을 가득 채우는 방법위젯/속성용도설명예시SizedBox.expand()전체 확장부모의 최대 크기로 확장child: SizedBox.expand(child: ...)Container전체 확장width/height를 double.infinity로 설정Container(width: double.infinity, height: double.infinity, child: ...)ExpandedRow, Column에서 확장주축 방향 전체 공간 차지Row(chi.. 2025. 5. 19. 애니메이션 기초 학습 및 플랫폼별 UI 이해 📌 학습 목표Flutter의 애니메이션 시스템을 이해하고 간단한 애니메이션 효과를 구현할 수 있다.Android(Material), iOS(Cupertino)의 플랫폼별 UI 차이를 이해하고, 플랫폼에 따라 분기 처리하는 기초를 배운다.📚 주요 개념 요약1. Flutter 애니메이션 기본 구조Flutter의 애니메이션은 다음 세 가지 핵심 요소로 구성됨:개념설명AnimationController애니메이션의 실행/정지/시간을 제어하는 컨트롤러. 프레임 단위로 상태를 업데이트함.Tween시작 값과 끝 값을 설정하여 애니메이션 값을 생성하는 객체. 예: 0~1, 색상 변화 등AnimatedWidget애니메이션 상태에 따라 자동으로 다시 그려지는 위젯. 매번 setState() 호출 필요 없음.2. 자주 사.. 2025. 5. 16. 이전 1 2 3 4 ··· 7 다음
