withmilk 님의 블로그

Flutter 앱에서 화면을 어떻게 구성할 수 있을까요?예쁜 앱을 만들기 위해서는 이미지를 배치하고, 버튼을 정렬하고, 텍스트를 위치시키는 등 UI 요소를 잘 정리하는 레이아웃이 필요하죠.그런데 이걸 전부 가능하게 만들어주는 기본 위젯 3총사가 있어요. 바로 Column, Row, Stack입니다.이 세 가지만 제대로 이해해도 Flutter UI의 80%는 만들 수 있어요!이 글에서 배울 내용Column, Row, Stack이 각각 무엇인지어떤 상황에서 각각을 써야 하는지정렬 속성(mainAxisAlignment, crossAxisAlignment 등) 설명실제 UI 예제 코드로 확인하기중첩해서 쓰는 방법까지 마스터!🧱 Column – 세로로 쌓아 올리기핵심 개념위젯들을 위에서 아래로 세로 방향으로 배..

Flutter로 앱을 만들다 보면 외부 서버와 데이터를 주고받는 API 통신이 필수예요.사용자 정보를 받아오거나 게시글 목록을 불러오는 등 대부분의 앱은 외부 API와 소통하죠.이 글에서는 Flutter에서 Dio 라이브러리를 사용해 API 통신을 구현하는 방법을 알려드릴게요.특히 Dio를 처음 써보는 Flutter 초보자도 쉽게 따라올 수 있도록 천천히 설명할게요 😊이 글에서 배울 내용Dio란 무엇인가?Flutter에 Dio 설치하는 방법GET 요청으로 JSON 데이터 받아오기에러 핸들링 처리하기받아온 데이터를 화면에 표시하기 (FutureBuilder 활용)실전 예제로 Flutter Dio 통신 완벽 이해하기1. Dio란 무엇인가?Dio는 Flutter에서 가장 많이 사용되는 HTTP 통신 라이브러..

플러터로 앱을 만들다 보면, 한 화면에서 다른 화면으로 이동하거나 되돌아오는 기능이 꼭 필요해요.예를 들어, 로그인 → 홈화면, 상품 목록 → 상세 페이지, 설정 → 로그아웃 등등이 있죠.이런 기능을 플러터에서는 Navigator 클래스를 통해 구현할 수 있어요.처음에는 push와 pop만 써도 괜찮지만, 앱이 조금만 복잡해져도 화면을 교체하거나, 조건에 따라 이전 화면들을 지우는 기능이 필요해져요.이 글에서는 화면 이동의 개념부터, 꼭 알아야 할 Navigator 함수 7가지를 예제와 함께 차근차근 소개할게요!Navigator란?화면 간의 이동을 스택(Stack) 구조로 관리하는 도구예요새 화면을 열면 스택에 쌓고(push), 뒤로 가면 꺼내요(pop)다양한 상황에 맞게 동작할 수 있도록 여러 함수들이..

플러터로 앱을 만들다 보면, 가장 먼저 마주하게 되는 생소한 파일 하나가 있어요. 바로 pubspec.yaml이라는 이름의 파일인데요,처음엔 “이게 도대체 뭐 하는 파일이지?” 싶지만, 알고 보면 이 파일은 앱에 필요한 모든 재료(패키지, 이미지, 폰트 등)를 정리해 놓는 비밀 창고 같은 존재예요.이번 글에서는 pubspec.yaml 파일이 무엇인지, 왜 중요한지, 그리고 꼭 알아야 할 기본 사용법을 아주 쉽게 정리해볼게요. 이 글 하나만 제대로 읽어도, pubspec.yaml 때문에 헤매는 일은 없을 거예요!✅ pubspec.yaml은 뭐 하는 파일일까요?핵심 포인트:앱에서 사용할 라이브러리(패키지)를 추가하는 설정 파일이에요앱에서 쓸 이미지, 폰트 등 리소스 파일도 여기에 등록해야 해요Dart SDK..

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

지난 글에서 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..