Flutter20 04. Flutter 에서 자주 사용하는 레이아웃 위젯 오늘 배울 것Flutter로 UI 화면을 구현할 때 자주 사용하는 레이아웃 위젯들을 하나하나 소개하고 직접 실습할 수 있는 코드를 제공해드리겠습니다. 오늘 배우는 레이아웃 위젯은 다음과 같습니다. 1. Column2. Row3. Container4. Stack5. Expanded 6. Padding7. SizedBox 1. Column (세로 정렬)Column은 자식 위젯들을 세로로 나열할 때 사용합니다.Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('첫 번째'), Text('두 번째'), Text('세 번째'), .. 2025. 5. 3. 03. 위젯 트리 구조, DevTools 로 Widget Tree 보는 방법 오늘 배울 것모든 Flutter 화면은 build() 함수 안에서 위젯 트리(Tree) 구조로 만들어집니다. 이 구조를 이해해야 화면 UI를 구성하고 그리기가 수월합니다. 오늘은 실습을 통해 위젯 트리 구조에 대해 배우고 DevTools 로 Widget Tree 보는 방법을 알아보겠습니다. 위젯 트리 구조 시각화하기화면에 텍스트, 버튼, 박스 등을 여러 개 중첩시켜서 위젯 트리가 어떻게 쌓이는지 직접 확인해 보겠습니다. 아래 코드를 main.dart에 붙여 넣고 앱을 실행해 주세요.import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const My.. 2025. 5. 2. 02. StatelessWidget과 StatefulWidget 비교하기 오늘 배울 것실습을 통해 StatelessWidget과 StatefulWidget 차이를 비교하고 StatefulWidget 기본 사용법을 알아보겠습니다. 먼저 둘의 차이를 말해보자면 StatelessWidget은 화면이 절대 안 바뀌는 위젯이고,StatefulWidget은 상태(state)가 변하면 화면이 다시 그려지는 위젯입니다. 실제로 둘이 어떻게 다른지 실습을 통해 확인해 보겠습니다. 실습 방법버튼을 누르면 숫자가 1씩 증가하는 코드를 작성합니다.이를 StatelessWidget과 StatefulWidget 로 만들어 각각 앱을 실행합니다. 버튼을 눌렀을 때 화면의 숫자가 변하지 않으면 Stateless, 숫자가 증가하면 Stateful이라는 걸 직접 눈으로 확인해 봅니다. Statele.. 2025. 5. 1. 01. Hellow Flutter! 첫 홈 화면 그리기 Flutter 독학 시작!Flutter를 혼자 독학하며 기본기를 익히는 글입니다.첫 번째 글은 프로젝트를 생성하고 Hellow Flutter! 첫 홈 화면을 그려보겠습니다. 먼저 Flutter 를 설치해 주세요. (아래 글을 참고해 주세요) Flutter 설치 및 개발 환경 구축하기 for Mac이번 글에서는앱 개발 프레임워크인 Flutter 와 Android Studio, Xcode 를 설치하여 Android, iOS 앱 개발 환경을 구축하겠습니다. Android Studio 는 구글이 만든 Android 앱 개발을 위한 공식 개발 도구입니다. Windaco2020.tistory.com Xcode 를 설치했다면 Simulator까지 실행해 주세요. iOS 시뮬레이터와 함께 보면서 진행해 보겠습니다. .. 2025. 4. 30. Flutter에서 안드로이드 뒤로가기 버튼 핸들링 하기 Flutter로 안드로이드 앱을 개발할 때에는 '뒤로 가기 버튼'의 동작을 핸들링하는 것이 중요합니다. 안드로이드에서는 위 이미지와 같은 '뒤로 가기 버튼'을 통해 현재 화면을 종료하고 이전 화면으로 돌아가는 기능을 제공합니다. 문제는 앱을 실행 중일 때에 뒤로 가기 버튼을 누르면 앱이 그대로 종료될 수 있다는 것입니다. 만약 앱 내에서 무언가 열심히 진행하다가 손이 미끄러져서(?) 뒤로 가기 버튼을 누르게 된다면??? 그 순간 앱이 곧바로 꺼지면서 휘발성 상태 값들이 사라지게 됩니다. 그렇기 때문에 안드로이드 앱을 개발할 때에는 사용자가 실수로 앱을 종료하지 않도록 뒤로 가기 버튼을 제어할 필요가 있습니다. Flutter에서는 WillPopScope 위젯을 사용하여 이러한 동작을 제어할 수 있습니.. 2025. 2. 4. Flutter로 멋진 노트 앱을 만들어보자 ⑦ - 노트 내보내기/가져오기 기능 구현하기 이번 글에서는 작성한 노트를 백업할 수 있는 노트 내보내기/가져오기 기능을 구현해 보겠습니다. 우리가 만드는 노트 앱은 데이터를 따로 데이터베이스에 저장하거나 외부에서 데이터를 수집하지 않고 있습니다. 그렇기 때문에 노트 백업 또한 사용자 기기 저장소에 파일 형태로 저장하도록 구현해 보겠습니다. 노트 내보내기/가져오기의 주요 요구사항은 다음과 같습니다. 노트 내보내기 - 사용자는 저장된 모든 노트를 파일로 내보낼 수 있습니다.노트 가져오기 - 사용자는 파일로부터 노트를 가져올 수 있습니다. 목차노트 내보내기 구현노트 가져오기 구현SnackBar 유틸 함수 분리설정 화면에 메뉴 추가 1. 노트 내보내기 구현NoteService 클래스에 노트를 CSV 파일로 내보내는 exportNotesToCsv 메서드를.. 2024. 12. 3. 이전 1 2 3 4 다음
