withmilk 님의 블로그

Flutter Column, Row, Stack 완벽 이해하기 – UI의 뼈대를 만드는 핵심 위젯

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

Flutter Dio로 API 통신하는 방법 – JSON 데이터 받아와서 화면에 출력하기

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

안녕하세요! 👋오늘은 정말 저도 많이 궁금했고, 많이 받는 질문 하나를 풀어보려고 해요."혼자 앱 개발하려면 Flutter가 좋아요? 아니면 React Native가 나아요?" 특히 1인 개발자, 사이드 프로젝트 하시는 분들이라면 꼭 고민하는 문제죠.오늘 이 글을 끝까지 보시면, 그 고민이 아주 깔끔하게 해결되실 거예요!1. 왜 크로스플랫폼 개발이 필요할까?앱을 만들 때 가장 먼저 마주치는 고민이 바로 이겁니다."아이폰이랑 안드로이드, 둘 다 만들려면 어떻게 하지?"원래대로라면 iOS 앱은 Swift로, Android 앱은 Kotlin으로 각각 따로 개발해야 해요.하지만 그렇게 하면 시간, 비용, 관리까지 2배 이상 들어갑니다.혼자서 개발한다면 부담이 정말 클 수밖에 없어요.그래서 등장한 게 크로스플랫..