본문 바로가기

Flutter + Dart/Flutter + Dart 공부8

flutter 빌드하기 1. 먼저 만든 프로젝트가 정상적으로 동작하는지 확인하세요. 그다음 Android용으로 APK를 빌드합니다.2. 터미널 bash 들어가서 입력flutter build apk --release--release 옵션은 실제 배포용 최적화 빌드입니다.빌드가 완료되면 프로젝트 디렉토리 안에 build/app/outputs/flutter-apk/app-release.apk 파일이 생성됩니다. 기다리기... 3. ./build/app/outputs/flutter-apk/app-release.apk 파일을 모바일에 옮겨서 설치하세요.4. 테스트 해 봅시다.https://youtube.com/shorts/4Ka9z3-lOLg 끝! 2025. 5. 7.
Widget의 종류 //widgets/framework.dart abstract class Widget {} abstract class StatelessWidget extends Widget {} abstract class StatefulWidget extends Widget {} abstract class RenderObjectWidget extends Widget {} abstract class InheritedWidget extends Widget {} 1. Widget정의: Flutter에서 화면에 그려지는 모든 요소의 최상위 추상 클래스.특징:불변(immutable) 객체로, 프로퍼티가 바뀌면 새로운 위젯 인스턴스를 생성트리 구조를 이루며, 부모→자식으로 위젯 트리가 구성쓰임새:모든 커스텀 위젯은 이 클래스를.. 2025. 5. 7.
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.
앱 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.

티스토리툴바