Flutter11 🔐 Flutter Firebase Auth로 로그인 기능 만들기 – 구글 로그인 연동 기초 앱을 만들다 보면 사용자별 기능이 필요할 때가 많습니다.이럴 때 가장 많이 사용되는 도구는 바로 Firebase Authentication입니다.이번 글에서는 Google 로그인을 Flutter 앱에 연결하는 방법을 단계별로 설명합니다.🔧 준비 사항1️⃣ Firebase 프로젝트 만들기Firebase Console 접속새 프로젝트 생성 (예: "flutter_todo")플랫폼에 "Android 앱" 추가패키지 이름 입력 (예: com.example.todoapp)google-services.json 파일 다운로드 → android/app 폴더에 추가2️⃣ Android 설정android/build.gradle classpath 'com.google.gms:google-services:4.3.15' //.. 2025. 8. 10. 🎬 Flutter 애니메이션 기초 – AnimatedContainer로 부드러운 UI 만들기 기능은 완벽하지만 뭔가 심심한 앱?그럴 땐 간단한 애니메이션만 추가해도 앱의 완성도가 확 올라갑니다.Flutter는 다양한 애니메이션 기능을 지원하며,그중에서도 AnimatedContainer는 입문자가 가장 쉽게 활용할 수 있는 위젯입니다.✨ AnimatedContainer란?Container와 거의 같지만, 속성이 변경될 때 자동으로 부드럽게 애니메이션을 적용합니다.width, height, color, padding, margin, alignment 등이 바뀔 때setState()만 해도 자동으로 애니메이션 처리🧪 실습 목표✅ 버튼을 누르면 박스 크기와 색상이 부드럽게 바뀜✅ 애니메이션 시간, 커브 설정 가능✅ 앱의 주요 버튼이나 카드 요소에 자연스럽게 적용 가능💻 기본 예제: 크기 & 색상 애.. 2025. 8. 10. 🎨 Flutter 다크모드 및 테마 설정하기 – 앱에 스타일 입히기 아무리 기능이 좋아도 보기가 좋지 않으면 사용자에게 외면받게 됩니다.Flutter에서는 기본적으로 다크모드, 라이트모드 테마를 쉽게 설정할 수 있는 기능을 제공합니다.이번 글에서는 ThemeData, Brightness, ThemeMode를 활용해앱에 통일된 디자인을 적용하고 다크모드를 지원하는 방법을 실습 예제로 알려드립니다.🌗 다크모드란?운영체제(OS) 설정에 따라 앱이 자동으로 라이트 모드 ↔ 다크 모드로 전환되는 기능입니다.최근 앱들은 대부분 다크모드를 기본 지원시력 보호, 배터리 절약, UX 향상 효과Flutter는 기본적으로 다크모드 감지를 지원함📐 테마 구성 요소ThemeData는 앱 전체 스타일을 정의할 수 있는 객체입니다.주요 속성속성설명primaryColor앱 주요 색상scaffol.. 2025. 8. 9. 💾 Flutter 로컬 데이터 저장하기 – SharedPreferences로 할 일 저장하기 지금까지 만든 To-do 앱은 앱을 종료하면 데이터가 사라지는 단점이 있었습니다.이를 해결하기 위해 Flutter에서 가장 간단하게 사용할 수 있는 저장 방법,바로 SharedPreferences를 사용해봅니다.🔍 SharedPreferences란?안드로이드/IOS에서 제공하는 키-값 저장 방식의 간단한 로컬 DB입니다.앱 내 간단한 설정값, 문자열 리스트 등을 저장할 수 있음파일 기반으로 동작하며, 앱 삭제 전까지 데이터가 유지됨🧩 목표 기능✅ 할 일을 추가하면 로컬에 저장✅ 앱을 껐다 켜도 목록 유지✅ 삭제, 체크 등 변경 시에도 자동 저장📦 SharedPreferences 설치1️⃣ pubspec.yaml에 패키지 추가dependencies: flutter: sdk: flutter .. 2025. 8. 9. ✅ Flutter 앱에 체크박스 기능 추가하기 – 할 일 완료 처리하기 할 일 목록 앱을 만들었다면, 이제 중요한 기능 하나가 남았습니다.바로, 완료된 항목을 체크하거나 해제할 수 있는 기능입니다.이번 글에서는 Flutter 앱에 Checkbox 위젯을 적용하여 할 일 항목에 상태(완료/미완료)를 표시하는 방법을 알려드립니다.🧩 어떤 기능을 추가할까요?✅ 각 할 일 항목 옆에 체크박스 표시✅ 체크하면 완료 → 텍스트에 취소선 적용✅ 체크 해제 시 다시 미완료 상태로 변경🛠️ 구조 변경 – String 대신 Map으로 관리기존에는 List으로만 할 일을 저장했지만,완료 상태를 저장하려면 Map 형태로 구조를 바꿔야 합니다.dart복사편집List> _todoList = [ {'title': 'Flutter 공부', 'done': false}, {'title': '운동하기',.. 2025. 8. 9. ✅ 할 일 목록(To-do) 앱 만들기 – Flutter 상태 기반 UI 실습 지금까지 배운 StatefulWidget, TextField, 버튼, 화면 전환 개념을실전 앱으로 연결해보는 미니 프로젝트 시간입니다.이번 글에서는 Flutter로 간단한 To-do List(할 일 목록) 앱을 만들어 보면서상태 관리 + UI 구성 + 리스트 처리를 한 번에 연습합니다.🎯 만들 앱 소개✅ 할 일 입력✅ 추가 버튼 클릭 시 리스트에 추가✅ 각 할 일 항목 옆에 삭제 버튼✅ 상태(State)로 리스트 자동 갱신🧱 전체 구조 (StatefulWidget)import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: TodoApp())); class TodoApp extends StatefulWidget { .. 2025. 8. 9. 이전 1 2 다음
