본문 바로가기

분류 전체보기696

UI 수정 - 즐겨찾기 기능, 아이콘, 레이블, 화면 전환 즐겨찾기, 아이콘 : https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#5레이블, 화면 전환 : https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#6속성 추가하기 - 리스트새로고침할 때 마다 달라지는 단어 쌍을 기억하기 위해 좋아요 기능 추가 합니다. ./lib/main.dartclass MyAppState extends ChangeNotifier { var current = WordPair.random(); // ↓ 버튼을 상태에 연결하기. getNext 메서드를 추가. void getNext() { current = Wo.. 2025. 5. 7.
개발환경 ./pubspec.yamlname: flutter_application_new_projectdescription: A new Flutter project.publish_to: "none" # Remove this line if you wish to publish to pub.devversion: 0.0.1+1environment: sdk: ">=2.19.4 Dart SDK 버전을 범위( >=2.19.4 )로 지정하는 것은 가능할 뿐만 아니라 권장 사항이기도 합니다. 유연성 : 여러 SDK 버전으로 프로젝트를 진행할 수 있어 약간 다른 설정을 사용하는 개발자도 수용할 수 있습니다.미래 대비 : 사소한 업데이트(예: 2.19.5 , 2.20.0 ) 를 허용함으로써 이 프로젝트는 pubspec.yam.. 2025. 5. 7.
day1 Flutter 실습: 버튼으로 리스트뷰 정렬 및 새로고침 구현하기 ✨ Flutter 실습: 버튼으로 리스트뷰 정렬 및 새로고침 구현하기Flutter에서 리스트뷰에 데이터를 넣고, 버튼을 눌러 최신순 / 오래된 순, 글자 오름차순 / 내림차순으로 정렬해보는 실습입니다. 기본적인 UI 구성부터 데이터 정렬, 페이지 넘기기까지 하나씩 구현해보겠습니다.🎯 학습 목표리스트 UI 구성임의 데이터 삽입다양한 정렬 (날짜 기준 / 글자 기준)페이지 넘기기 구현1️⃣ 리스트 UI 만들기ListView.builder를 사용하여 기본적인 리스트 UI를 구성합니다.class MyListPage extends StatelessWidget { final List items = ['Banana', 'Apple', 'Mango', 'Cherry']; @override Widget build.. 2025. 5. 7.
앱 UI 수정 - 위젯 추출, 컬럼 중앙 배열 프로젝트 만들기1. 🧩 위젯 추출: 단어쌍 표시 줄을 분리하기현재 단어 쌍을 표시하는 코드는 Text(appState.current.asLowerCase) 입니다.단순한 코드라도, UI가 복잡해질 가능성이 있다면 별도의 위젯으로 분리해 두는 것이 좋습니다.Flutter에서는 각 UI의 논리적 단위별로 위젯을 나누는 것이 복잡성을 관리하는 핵심 전략 중 하나입니다.✨ 위젯을 분리하는 일반적인 이유 3가지📦 역할 분리단어 표시만 전담하는 위젯으로 분리하면, 메인 화면 코드를 간결하게 유지할 수 있습니다.🎨 꾸미기 쉬움별도 위젯 안에서 TextStyle, Card, Padding 등의 꾸밈 요소를 자유롭게 추가할 수 있습니다.🔁 재사용성 증가동일한 스타일로 단어쌍을 표시하는 상황이 생겼을 때, 다른 화.. 2025. 5. 6.
프로젝트 만들기 개발환경 구축 프로젝트 생성 1. Flutter 프로젝트 만들기Visual Studio Code를 실행하고 명령어 팔레트를 엽니다(F1 또는 Ctrl+Shift+P 또는 Shift+Cmd+P 사용).Flutter: New Project 명령어를 선택합니다.Application을 선택하고 프로젝트를 만들 폴더를 선택합니다. 프로젝트의 이름을 지정합니다. (소문자, 스네이크) 경로 신뢰 체크합니다. 2. 초기 앱 복사 및 붙여넣기VS Code의 왼쪽 창에서 Explorer가 선택되어 있는지 확인하고 pubspec.yaml 파일을 엽니다.이 파일의 콘텐츠를 다음으로 바꿉니다. 이름은 기존의 것으로 유지하니다.name: namer_appdescription: A new Flutter project.publi.. 2025. 5. 6.
Flutter 위젯 기본 이해 학습 내용: Flutter 기본 위젯: Scaffold, AppBar, Column, Row, Container, Text. MaterialApp과 기본 UI 구조 이해. 위젯 트리와 레이아웃 개념(정렬, 패딩).목표/실습 과제: Flutter 프로젝트에서 MaterialApp과 Scaffold로 기본 앱 틀 생성. Column/Row를 사용해 세로/가로 레이아웃 구성 연습. Text와 Container로 간단한 UI 요소 배치(예: 제목, 설명 텍스트). 예제: 앱바에 “My App” 제목, 화면 중앙에 “Hello Flutter” 텍스트 표시. 1. Flutter 프레임워크Flutter는 구글이 개발한 오픈소스 UI 프레임워크로, 단일 코드베이스로 iOS, Android, 웹, 데스크톱 .. 2025. 5. 5.

티스토리툴바