오늘도 공부

실전 프로젝트로 배우는 종합 튜토리얼1. 소개 및 개념1.1 왜 Riverpod + Drift를 함께 사용하는가?현대 Flutter 앱 개발에서 로컬 데이터 영속성과 상태 관리는 핵심 요소입니다. Drift와 Riverpod의 조합은 다음과 같은 강력한 이점을 제공합니다:Drift의 강점타입 안전성: 컴파일 타임에 SQL 쿼리 검증리액티브 쿼리: Stream 기반 실시간 데이터 업데이트마이그레이션 관리: 체계적인 스키마 버전 관리성능: SQLite의 빠른 성능과 최적화크로스 플랫폼: 모바일, 웹, 데스크톱 지원Riverpod의 강점의존성 주입: 깔끔한 아키텍처 구현컴파일 타임 안정성: Provider 타입 체크테스트 용이성: Mock 객체로 쉬운 테스팅상태 관리: 선언적이고 예측 가능한 상태 흐름성능 최..

문제 상황Android Studio에서 Flutter 프로젝트를 열었을 때 Android 프로젝트로 인식되어 다음과 같은 오류가 발생하는 경우:"Error: Entrypoint isn't within the current project" 오류 발생Flutter 실행 구성이 나타나지 않음Flutter Device Selection 드롭다운이 보이지 않음프로젝트가 Android SDK로 열림해결 방법1. Flutter 프로젝트 구조 재생성# 프로젝트 디렉토리로 이동cd /mobile# Flutter 프로젝트 구조 재생성flutter create . --project-name xxxx --org com.xxxx2. IDE 캐시 및 설정 초기화# .idea 폴더 삭제 (Android Studio 설정 초기화)r..

Flutter에서 자주 사용하는 디자인 패턴 정리Flutter 개발에서 자주 쓰이는 디자인 패턴을 UI 트리, 상태 관리, 아키텍처, 객체지향 패턴의 네 가지 축으로 정리했습니다.각 패턴은 **왜 쓰는지(Why), 언제 쓰는지(When), 어떻게 쓰는지(How)**를 짧은 예제와 함께 담았습니다.1. UI 트리 패턴1-1. Composite 패턴개념: Flutter 위젯 트리 자체가 Composite. 전체와 부분을 동일하게 다룸.장점: UI를 재귀적으로 구성/관리하기 쉬움.Column( children: [ Text("안녕"), Row(children: [Icon(Icons.star), Text("별")]), ],)1-2. Decorator 패턴개념: 기능을 감싸면서 꾸밈을 추가.예시:D..

flutter analyze는 Flutter 프로젝트의 정적 분석 도구로, 코드에서 오류나 경고, 스타일 문제를 사전에 찾아주는 명령어입니다. Dart의 dart analyze와 동일한 기능을 포함하며, Flutter 프로젝트에 맞게 확장된 형태로 사용됩니다.1. 기본 개념Flutter/Dart 코드에서 타입 오류, 사용하지 않는 코드, 잠재적 버그, 스타일 위반 등을 찾아냄.빌드 전에 코드 품질을 높이고 런타임 오류 가능성을 줄임.분석 기준은 analysis_options.yaml 파일에서 정의함.2. 사용법터미널에서 프로젝트 루트에서 실행:flutter analyze현재 디렉토리 전체를 분석.특정 파일/디렉토리만 지정 가능:flutter analyze lib/main.dart flutter analy..

App Store Changes at WWDC25: What Flutter Devs Must Know | by Deepak Sharma - FreediumWWDC25 wasn't just about flashy AI tools and new UI toys. Behind the main stage, Apple quietly dropped some major shifts in how Flutter apps are submitted, reviewed, and approved. If your app touches the App Store in any way — and especially if you buildfreedium.cfd위 내용을 한국어 정리한 내용입니다.목차WWDC25 이후, Flutter 앱 개발자..

https://medium.com/flutter/whats-new-in-flutter-3-32-40c1086bab6e What’s new in Flutter 3.32Hot reload on web, native fidelity, and deeper integrationsmedium.com 📋 목차 미리보기Flutter 3.32란?웹(Web)웹에서 핫 리로드 실험 기능VS Code와 터미널에서 사용하는 법DartPad에서 핫 리로드 적용플랫폼별 주요 업데이트Framework: Expansible, RawMenuAnchorCupertino: Apple 스타일 “squircle (곡면 스퀴클)”Material: CarouselController, TabBar, SearchAnchor 등접근성과 텍스트 입력 ..

소개 · Flutter 인터뷰 내용No results matching ""flutter-dev-interview-ko.netlify.app Flutter 면접 인터뷰 내용을 정리했습니다. 자세한 내용은 위 링크 클릭하시면 되세요~1. Flutter란 무엇인가요?2. Flutter가 앱 개발에 사용하는 언어는 무엇인가요?3. Flutter에서 위젯(widget)이란 무엇인지 설명해주세요.4. Flutter 아키텍처에 대해 설명해주세요.5. StatefulWidget과 StatelessWidget의 차이점은 무엇인가요?6. Flutter에서 스크롤 가능한 리스트를 어떻게 만드나요?7. BuildContext 클래스의 중요성은 무엇인가요?8. Flutter 앱 라이프사이클에 대해 설명해주세요.9. Flutte..

Flutter에서 cached_network_image 패키지를 사용할 때 이미지의 **만료 기간(Cache Expiration)**을 설정하는 방법은 여러 가지가 있습니다. 주요 방법은 다음과 같습니다.1. CacheManager를 직접 사용하여 만료 기간 설정기본적으로 cached_network_image는 내부적으로 flutter_cache_manager를 사용합니다. 따라서 CacheManager를 커스텀하여 만료 기간을 설정할 수 있습니다.✅ Custom CacheManager 만들기import 'package:flutter_cache_manager/flutter_cache_manager.dart';class CustomCacheManager extends CacheManager { stati..

Flutter의 IntrinsicWidth 위젯 이해 및 사용법Flutter에서는 다양한 레이아웃 위젯을 제공하여 UI 요소를 원하는 방식으로 배치할 수 있습니다. 그중에서 IntrinsicWidth 위젯은 자식 위젯들의 너비를 최적화하는 데 도움을 주는 중요한 도구입니다.1. IntrinsicWidth란?IntrinsicWidth 위젯은 자식 위젯의 최소 및 최대 고유 너비(본질적인 너비, Intrinsic Width)를 계산한 후, 가장 적절한 너비를 적용하는 역할을 합니다. 이를 통해 가변적인 크기의 위젯을 균형 있게 정렬할 수 있습니다.일반적으로 Column 또는 Row 안에서 위젯들이 각기 다른 크기로 배치될 때, 가장 넓은 위젯의 크기에 맞춰 정렬하고 싶다면 IntrinsicWidth를 사용하..

Mcp Server를 이용해서 Figma에 있는 디자인을 커서로 그대로 Flutter 코드로 가져오는 방법을 공유 할려고 합니다. (클론 가능)준비물NodeFigmacursor🚀 MCP(Model Context Protocol)란?MCP는 애플리케이션이 LLM(대형 언어 모델)과 맥락(Context)을 주고받는 방식을 표준화하는 프로토콜이에요. 쉽게 말해, LLM이 원하는 결과를 제대로 생성하도록 정확한 정보(맥락)를 전달하는 기술입니다.💡 비유하자면, MCP는 USB-C와 같아요.하나의 표준 인터페이스로 다양한 기기(LLM)와 연결할 수 있죠.Figma 디자인을 Flutter 코드로 변환하려면, 올바른 맥락을 LLM에 제공해야 해요. 그렇지 않으면 결과물이 완전 엉망이 되거나, 원하는 수준에 도달하..

Flutter에서 MVVM 아키텍처를 기반으로 Riverpod과 Freezed를 활용하는 폴더 구조를 추천해 드리겠습니다.📂 Flutter MVVM + Riverpod + Freezed 아키텍처 폴더 구조lib/│── main.dart # 앱 진입점│── app.dart # 앱 전체 구성 (MaterialApp)│├── core/ # 공통 유틸 및 설정│ ├── config/ # 앱 환경설정 (API, 라우트, 상수 등)│ │ ├── environment.dart # 개발/운영 환경 구분│ │ ├── app_routes.dart..

Flutter 인앱 결제 구독 복원(restore) 기능 구현앱을 삭제하고 다시 설치했을 때 구독 상태를 복원하는 방법을 자세히 설명할게.---1. 구독 복원 원리iOS: 사용자는 이미 구독한 상품을 다시 구매할 수 없고, restorePurchases()를 호출하면 기존 구독 정보를 가져올 수 있음.Android: 자동으로 복원되지 않으므로, queryPastPurchases()를 호출하여 과거 구매 내역을 가져와야 함.---2. 구독 복원 코드 구현(1) 과거 구매 내역 조회 (구독 복원)Flutter에서 구독 상태를 확인하려면 queryPastPurchases()를 사용해야 해.Future restorePurchases() async { final QueryPurchaseDetailsRespons..

Flutter에서 인앱 결제 구독(IAP, In-App Purchase)을 구현하는 방법을 단계별로 설명해 줄게.---1. 패키지 설치Flutter에서 인앱 결제를 구현하려면 in_app_purchase 패키지를 사용해야 해.dependencies: flutter: sdk: flutter in_app_purchase: ^3.1.10설치 후 패키지 가져오기import 'package:in_app_purchase/in_app_purchase.dart';import 'package:in_app_purchase/store_kit_wrappers.dart';---2. Google Play 및 App Store 설정구독을 구현하려면 Google Play Console 및 App Store Connect에서..

Riverpod는 기존의 provider 를 개선해서 나온 업그레이드 버전이다. 정식 패키지는 https://riverpod.dev/ko/ Riverpod 안전하게 Provider 읽기 Provider를 읽는 중 더 이상 bad state가 되지 않습니다. 만약 Provider를 읽기 위한 필요한 코드를 작성하면, 당신은 유효한 값을 얻을 수 있습니다. Provider는 비동기적으로 로드된 riverpod.dev 자세한 설명은 https://velog.io/@yeahsilver/Flutter-Riverpod-Riverpod%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-Riverpod%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%..

Flutter 대표 카카오톡 개발자 톡을 운영중입니다. https://open.kakao.com/o/gsshoXJ Flutter 개발자 모임 #flutter #android #ios #안드로이드 #아이폰 #모바일 #선물요정소환 open.kakao.com 자바스크립트에서 많이 사용되는 Promise.all 을 다트에선 어떻게 구하는지 알아볼 예정입니다. Promise.all 은 여러개의 Promise 를 모아서 한꺼번에 처리해주는 역할을 해준다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all Promise.all() Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 ..

저장소 정리하다 보니 1월에 진행된 간단한 백엔드 연동된 스터디 자료가 있어서 공유합니다. 내용 : 간단한 투두 리스트 구현내용 1. Flutter 2. Bloc 3. RxDart 4. Docker 5. Node, Express 6. nginx proxy https://github.com/bear2u/flutter-ecommerce-study

Pragmatic State Management in Flutter (Google I/O’19) Dart: Productive, Fast, Multi-Platform — Pick 3 (Google I/O’19) Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web (Google I/O’19) Building for iOS with Flutter (Google I/O’19) Beyond Mobile: Material Design, Adaptable UIs, and Flutter (Google I/O’19)

Flutter 화면 제작 공부https://www.youtube.com/watch?v=dMLreUXpSQ0&t=1s를 보고 하나씩 공부 하고자 한다.우선 사이즈 부분을 알아보자.Row를 사용해서 정렬Container Boxdecoration을 이용해서 박스형태 제작그림자 효과 적용소스높이 자동 계산 로직double baseHeight = 640.0; double screenAwareSize(double size, BuildContext context) { return size * MediaQuery.of(context).size.height / baseHeight; }import 'package:flutter/material.dart'; import 'package:flutter_adidas_shoes_..

Flutter + Steho 사용하기 Flutter 로컬 디비 사용시 대중적인 방법은 sqflite 일것이다. 일반 sqlite 와 문법이 똑같으며 사용하기에도 편하다. sqlite 를 모바일에서 연동시 페이스북에서 나온 steho 라는 라이버러리가 있다. 안드로이드만 현재 가능하지만 꽤 유용하게 사용가능하다. stetho로 android 디버깅을 보다 쉽게 그럼 flutter 에서 어떻게 적용하는지 살펴보자. 우선 sqflite 를 import 로 가져오고 생성시 getDatabasePath() 로 가져올 수 있다. Future init() async { String documentsDirectory = await getDatabasesPath(); //주의하자. final path = join(doc..

Flutter Codelab을 돌려볼때 오류가 발생될 경우가 있다. 코드랩 위치 : https://codelabs.developers.google.com/codelabs/mdc-101-flutter 오류 내용은 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android해결방법은 2가지를 체크 해야 한다. 1. android 폴더내에 project 레벨에서 build.gradle 에서 dependencies 가 3.1 이상으로 되어있는 지 체크하자. dependencies { classpath 'com.android.tools.build:gradle:3.2.1' }2. android/gradle/wr..

No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android 원인 : 오래된 flutter 플젝을 열때 나오는 버그이다. Open android/gradle/gradle-wrapper.properties and change this line:distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip to this line:distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip Open android/build.gradle and chang..

Flutter WhatsApp 클론 (부산 4주차 스터디)부산에서 매주 진행되는 Flutter 스터디 4주차 내용입니다.더 많은 부산에서 스터디 정보는 네이버 카페 에서 확인 가능합니다.소스는 Github 에서 확인 가능합니다. 1주차TODO 리스트 앱 개발2주차Youtube 화면 클론3주차WhatsApp 화면 개발스터디 내용이번주차는 저번 스터디에 이어서 로직부분을 진행하도록 하겠다.FirestoreFireBase AuthGoogle SiginFireBase Storage - 이미지 업로드FireStoreFirebase 에서 제공하는 Collection - Document 형태의 nosql realdb 이다.자세한 설치 및 내용은 공식문서를 참조하자.시나리오 #1채팅방에서 텍스트박스에 내용을 입력하면 ..

Flutter 왓츠앱 클론부산에서 매주 진행되는 Flutter 스터디 3주차 내용입니다.더 많은 부산에서 스터디 정보는 네이버 카페 에서 확인 가능합니다.1주차TODO 리스트 앱 개발2주차Youtube 화면 클론소스는 Github 에서 확인 가능합니다.왓츠앱 클론오늘은 먼저 UI 개발 시간을 가져볼 예정이다.우선 완성된 화면은 다음과 같다. ChatScreen화면은 크게 2개로 나뉜다. 리스트뷰와 하단에 텍스트입력창이다.그리고 하단에 텍스트가 입력이 될 때마다 리스트가 업데이트 되는 구조이기 때문에 StatefuleWidget 으로 간다.class ChatScreen extends StatefulWidget { @override State createState() => ChatState(); } //채팅..

Flutter Youtube 화면 개발이 내용은 Google IO 2018 Busan 에서 조성윤님이 발표하신 내용을 기반으로 했습니다. 부산에서 진행된 flutter 2주차 스터디 내용입니다. 1주차 스터디 : TodoList 화면 개발전체 소스는 Github 에서 받으실수 있습니다.2주차 스터디는 Youtube Api를 활용해서 화면 구성을 공부해보는 시간을 가져봅니다. 이번시간에 배우는 부분은 아래와 같습니다. Youtube Api 조회Json decoding -> dart class 로 변환하는 방법FutureBuilder 로 비동기로 위젯 구성하기우선 프로젝트를 기본적으로 구성을 해봅니다. main.dartmaterial 테마를 가져옵니다. src/app.dart 를 import 해서 패키징 합..

Flutter Simple TODO(할일관리) List첫번째 수업에서는 Dart와 Flutter를 살펴보고 ToDoList App 을 만들어보도록 할 것이다. 이 내용은 부산에서 진행된 Flutter 스터디 1주차를 정리한 내용입니다.소스는 여기에서 받을수 있습니다.Stateless 와 Stateful WidgetStateless 는 동적으로 변하지 않는 위젯Stateful 은 동적으로 변할수 있는 위젯Stateful 구현은 createStateState 상속된 클래스 구현모든 Widget은 build 함수를 필수import 'package:flutter/material.dart'; ​ void main() => runApp(new TodoApp()); ​ class TodoApp extends Stat..

보통 이런 오류는 lazy 하게 네트워크 상태가 늦어지거나 할 경우 이미 위젯은 dispose가 된 상태인데 setState 를 호출 하는 경우로 보인다. 해결법은 간단하게 onDispose 함수에서 변수 하나 선언해서 true / false 로 해주면 된다. 라이프사이클에 대해서 궁금하면 여기 로 가서 한번 보고 오자. 우선 이렇게 변수를 지정 후에@override void dispose() { super.dispose(); isDisposed = true; } 변경하는 부분에서 if(!isDisposed) { setState(() {.... }); }이런식으로 하면 된다. 팁으로 시작시 setState 를 하는 경우에는 this.mounted 로 체크가 가능하다. 이상으로 늦은 setState 오류에..

Android 사용시 자주 사용되는 게 같은 Task 내에서 onActivityForResult 를 사용하는 편이죠. 물론 안드로이드내에서는 호출하는 쪽에서는 startActivityForResult 를 하고 다음 엑티비티에서 할일 하고 값을 다시 보낼때 onActivityResult 를 통해서 값을 받습니다. 관련 글은 http://liveonthekeyboard.tistory.com/150 보시면 됩니다. Flutter 내에서는 라우터를 이용을 할텐데요 그럴경우 주고 받는 걸 어떻게 하는 지 볼게요. 우선 A -> B -> A 라고 가정하면A 에서 라우팅을 Map results = await Navigator.of(context).push(new MaterialPageRoute( builder: (B..

Flutter로 작업시 Android Native 모듈과 통신할 일이 생길 수 있다. 그럴경우 android 폴더를 오른쪽 클릭 후 open Android module in Android Studio 로 열면 된다. 기존에 Flutter에 라이버러리들을 안 붙인 상태이면 정상적으로 작동이 될것으로 보인다. 하지만 다른 라이버러리들을 사용을 하고 있는 경우 하단의 오류 같은게 나올 수 있다. 이 부분을 해결하기 위해선 플러터 오픈 채팅방에서 고수 두부랩님이 알려주신 팁으로 gradle 폴더안에 gradle-wrapper.properties 파일을 열어서 gradle 버전을 수정해주면 된다. distributionUrl=https\://services.gradle.org/distributions/gradle..

Flutter BuildContext 알아보기https://flutterbyexample.com/build-context-class 보고 공부한 내용입니다.Flutter 에서 BuildContext는 위젯 트리에 있는 위젯 위치라고 보면 된다.각각의 위젯마다 고유의 BuildContext 가 존재한다.class _MyHomePageState extends State { _MyHomePageState() { print(context.hashCode); // prints 2011 } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body:..

Flutter 에서 내위치 가져오기모바일에서 내 위치를 가져오는 건 필수 기능 중 하나!!관련 플러그인은 https://pub.dartlang.org/packages/geolocator#-readme-tab- 에서 확인 가능하다.그럼 설정은?pubspec.yamlgeolocator: '^2.0.1'Geolocator 라는 메인 클래스를 통해서 위치를 가져 올 수 있다.Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high)리턴 값은 Future 비동기로 받는다. 그래서 then이나 await 로 사용이 가능하다.Future getCurrentUserLocation() async { return Geolocator() .getCurre..