withmilk 님의 블로그

Flutter를 처음 접하면 가장 먼저 마주치는 개념이 바로 위젯이에요. Flutter는 모든 것이 위젯이라고 할 만큼 위젯 중심으로 앱을 만들게 되어있어요. 버튼, 텍스트, 이미지뿐만 아니라 화면 전체도 위젯으로 이루어져 있답니다.처음에는 “위젯이 뭘까?” 하고 막막했는데, 직접 사용해보니 위젯을 이해하면 앱 개발이 훨씬 재미있어지더라고요. 이번 글에서는 Flutter의 위젯 시스템을 제대로 이해할 수 있도록 StatelessWidget과 StatefulWidget의 차이, 그리고 커스텀 위젯 만드는 방법까지 정리해봤어요.📌 위젯이란 무엇인가요?Flutter에서 앱 화면을 구성하는 모든 요소가 위젯이에요.버튼, 이미지, 리스트, 심지어 앱바, 전체 화면까지 전부 위젯으로 만들어져 있어요.위젯은 계층 ..

📝 들어가며앱 개발에 관심이 있으신 분들이라면 “어떤 언어로 앱을 만들어야 할까?”라는 고민을 많이 하셨을 것 같아요. Flutter로 앱을 만들 때 사용하는 언어는 바로 Dart인데요. “Dart가 뭐지? 왜 꼭 Dart를 써야 하지?”라고 궁금해하시는 분들도 많으시더라고요. 이번 글에서는 Dart 언어의 특징과 함께, JavaScript, Java, Swift와 비교했을 때 어떤 점이 좋은지 자세히 알려드리려고 해요.Flutter로 앱을 만들면서 Dart를 사용해본 경험을 토대로, 장단점과 함께 왜 Dart가 앱 개발에 적합한지 살펴봤어요.1. Dart 언어의 특징부터 살펴볼게요Dart는 구글에서 만든 언어로, 모바일, 웹, 데스크톱 앱까지 한 번에 개발할 수 있는 멀티 플랫폼 언어예요.싱글 스레드..

지난 글에서 Riverpod의 FutureProvider, StreamProvider, 그리고 NotifierProvider를 활용해 상태 관리를 어떻게 더 쉽게 할 수 있는지 소개해봤어요. 각각의 Provider가 앱의 데이터 흐름과 상태를 얼마나 깔끔하게 관리해주는지 살펴보면서 Riverpod의 강력함을 느꼈을 거예요.오늘은 그 흐름을 이어서, Firestore 데이터와 Riverpod을 결합해서 앱의 데이터 흐름을 더욱 강력하게 만드는 방법을 보여드리려고 해요. 특히 Firestore 데이터를 가져오는 get 방식과 실시간으로 반영되는 stream 방식을 Riverpod으로 어떻게 관리하면 좋을지, 예제 코드와 함께 자세히 알려드릴게요.Firestore 데이터를 Riverpod으로 관리하면 앱이 더..

지난 글에서는 StateProvider를 이용해 버튼을 눌러 숫자를 증가시키는 간단한 예제를 만들었어요.하지만 앱이 조금만 복잡해지면, StateProvider만으로는 부족한 경우가 생깁니다.데이터를 서버에서 불러와야 할 때실시간 데이터를 계속 받아야 할 때여러 상태를 하나로 묶어 관리하고 싶을 때이럴 때 등장하는 게 바로 FutureProvider, StreamProvider, NotifierProvider예요!이번 글에서는 이 세 가지를 왜 써야 하는지부터 어떻게 쓰는지까지 자세히 알려드릴게요 😊🔮 1. FutureProvider – 비동기 데이터를 다룰 때왜 필요한가요?StateProvider는 정적인 값만 다룰 수 있어요.하지만 서버에서 데이터를 불러오거나, 파일을 읽는 등의 비동기 작업은 F..

Flutter로 앱을 만들다 보면 꼭 마주하게 되는 문제가 있어요.바로 "상태 관리(State Management)"예요.버튼을 눌렀을 때 숫자가 바뀌거나, 로그인한 사용자 정보가 바뀌었을 때그걸 앱 화면에 반영하려면 상태를 잘 관리해야 하거든요.이걸 제대로 못하면…버튼 눌렀는데 값이 안 바뀌고, 다른 화면에서도 이상한 데이터가 보이고…앱이 고장난 것처럼 보이겠죠? 😰그래서 오늘은 Flutter에서 상태를 아주 깔끔하게 관리할 수 있게 도와주는강력한 친구, 바로 riverpod을 소개해드릴게요!✅ 상태 관리는 왜 필요한 걸까?앱 안에는 버튼 클릭 횟수, 로그인 여부, 장바구니 같은 "상태"들이 있어요.이런 값들은 사용자 행동에 따라 계속 바뀌어요.바뀐 값을 화면에 보여주려면 상태를 추적하고, 변화에 반..

iOS 앱을 개발하다 보면, 사용자에게 권한을 요청하는 메시지를 보여주는 일이 많아요.예를 들어, "이 앱은 카메라를 사용하려면 권한이 필요합니다" 같은 문장이죠.그런데! 앱을 다국어로 만들고 싶은데 이 메시지가 고정된 언어로만 나와서 곤란했던 적 있지 않으신가요? 오늘은 그런 문제를 해결해주는 방법! 바로 InfoPlist.strings 파일을 활용해Info.plist 메시지를 다국어로 번역하는 방법에 대해 알아볼게요 🙌✅ 이 글에서 배울 내용iOS에서 권한 메시지를 번역해야 하는 이유InfoPlist.strings 파일이 뭔지 이해하기각 언어별 번역 파일 만드는 방법Flutter 프로젝트에 적용하는 실전 팁번역이 안 되는 경우 해결법까지!🤔 왜 Info.plist를 번역해야 할까?iOS에서는 위치..

Flutter로 앱을 만들다 보면 꼭 필요한 기능이 있어요. 바로 사용자에게 권한(permission)을 요청하는 기능인데요. 예를 들어 위치를 가져오거나, 카메라를 켜거나, 마이크를 사용할 때 꼭 권한을 먼저 받아야 해요. 이때 사용하는 게 바로 permission_handler 패키지예요! ✅ 이 글에서 배울 내용permission_handler 설치 방법안드로이드와 iOS 설정권한 요청 및 상태 확인 코드실전 예제: 카메라 권한 요청자주 묻는 질문(FAQ)📦 permission_handler 설치 방법pubspec.yaml에 패키지 추가최신 버전 확인은 pub.dev/permission_handler에서!터미널에서 다음 명령어로 설치를 마무리해 주세요.flutter pub get혹은 VS Code..

지난 글에서는 사용자가 선택한 이미지를 로컬에 저장하고,SharedPreferences를 통해 경로를 기억하는 방식으로 프로필 이미지를 처리했어요. 이 방식은 간단하고 빠르지만, 실제 서비스 환경에서는 치명적인 문제가 있었죠. 🥲로컬 이미지 경로는 내 기기에서만 유효하고, 임시 저장소이기 때문에 앱 재실행 후 이미지가 사라질 수도 있었어요. 이제 이런 문제를 완전히 해결할 차례입니다.이번 글에서는 Firebase Storage를 활용해 이미지를 클라우드에 저장하고,모든 사용자 기기에서 안정적으로 이미지를 불러오는 방법을 알아보겠습니다.✅ 우리가 만들 기능 요약사용자가 선택한 프로필 이미지를 Firebase Storage에 업로드업로드 후 생성되는 이미지 URL을 SharedPreferences와 Fir..

이전 글까지 Flutter로 만든 메신저 앱, 잘 작동하긴 하지만 뭔가 부족하지 않으셨나요?오늘은 메신저 앱에 닉네임 설정과 프로필 이미지 표시 기능을 추가해 보면서,좀 더 사용자다운 느낌, 그리고 예쁜 인터페이스를 만드는 법을 알아보겠습니다!이 글은 초보자도 쉽게 따라 할 수 있도록 하나하나 순서대로,그리고 코드 예제까지 포함해서 설명할게요. 😉📌 오늘 목표요약사용자가 앱 처음 실행할 때 닉네임과 프로필 이미지를 설정할 수 있어요.메시지를 보낼 때 닉네임과 이미지도 함께 저장돼요.메시지 목록에서 닉네임과 프로필 이미지가 함께 보여요.🧰 사용 기술 요약Firebase Realtime Database : 메시지 저장용SharedPreferences : 닉네임, 이미지 경로를 로컬에 저장함ImagePi..

Flutter와 Firebase로 간단한 메신저 앱을 만들었다면, 이제 진짜 메신저처럼 멋지게 업그레이드해볼 차례입니다!이번 글에서는 메시지 버블, 닉네임 표시, 보낸 시간 표시, 내 메시지와 다른 사람 메시지 구분까지,코드를 어떻게 변경했는지 하나하나 자세히 알려드릴게요.🧩 Flutter 메신저 업그레이드에서 변경된 부분메시지를 보낼 때 닉네임과 시간도 함께 저장메시지를 시간순으로 정렬해서 보여주기내 메시지는 오른쪽, 다른 사람 메시지는 왼쪽 정렬메시지를 버블 디자인으로 예쁘게 꾸미기닉네임과 보낸 시간도 화면에 표시하기업그레이드된 메신저 예제 코드//chat_screen.dartimport 'package:flutter/material.dart';import 'package:firebase_datab..