올해는 머신러닝이다.

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..

Stateful Widget Lifecyclehttps://flutterbyexample.com/stateful-widget-lifecycle/#6-didupdatewidget 을 공부해서 요약한 글입니다. 자세한 내용은 원문확인 부탁드립니다.StatefulWidget을 만들때 State 라는 오브젝트를 만든다. 이 오브젝트는 위젯이 동작하는 동안 mutable state를 뜻한다.state의 컨셉은 두가지로 정의되어 진다.위젯에 의해서 사용되어지는 데이터는 변할수 있다.위젯이 빌드 될때 데이터들을 동기적으로 읽을수 없다. 모든 State 들은 build 함수가 호출될 때까지 설정되어야 한다.StatefulWidget 와 State 는 클래스를 분리를 한 이유는?성능때문이다.1. createState()..

Transform 활용Stream 사용시 주어진 값들을 이용해서 가공할 일이 생길수 있다. 그럴경우 Transform 을 활용해서 가능하다.우선 예제를 보면서 살펴보자.이메일을 넣는 경우 유효성 체크 하는 validate stream 을 만든다고 가정하자.'@' 포함되는 경우 정상, 없는 경우 오류로 리턴하는 아주 간단한 예제우선 bloc 패턴을 이용할 예정이다.bloc 생성하자.StreamController 생성sink 정의transform 정의... final bloc = new Bloc(); ... class Bloc { final emailController = StreamController(); Function(String) get changeEmail => emailController.sink..

Relative Programming - BLoC 패턴아래 내용은 https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/ 을 공부하고 요약해놓은 글입니다.BLoC Pattern 은 구글 개발자 Paolo Soares 와 Cong Hui 에 의해서 디자인 되었다. 그리고 처음 발표된 건 2018년 DartConf 이다.관련 영상BLoC = Business Logic Component.하나 또는 여러개의 BLoC가 존재할수 있다.Presentation Layer(UI 부분)에서 가능하한 제거되며 로직부분만 분리해서 테스트가 용이함플랫폼 종속적이지 않다.환경에 종속적이지 않다.BLoC 패턴은 스트림을 이용해서 만들어진다.위젯은 ..

Reactive Programming part 1 - Stream스트림이란 무엇인가?스트림을 이해하기 위해선 파이프를 상상해야 한다.뭔가를 입력을 했다면 그것이 파이프 안에서 흘러서 다른 출구쪽으로 배출 되는 걸 뜻한다.그럼 Flutter 을 대입해보자면파이프는 Stream 이라고 부른다.Stream을 제어하기위해 우리는 자주 StreamController 를 이용한다.Stream 입력하기 하기 위해 StreamSink 를 사용한다.입력 할수 있는 것들은 어떤 것이든 가능하다.데이터, 오브젝트, map, 에러코드, 이벤트, 심지어 다른 스트림도 가능하다.배출은 어떻게 확인하나?일단 입력이 되면 Rx 처럼 subscribe 를 통해서 받을 수 있다. 이 과정을 flutter에서는 listen 한다고 말한다..

Container 레이아웃 치트시트https://medium.com/jlouage/container-de5b0d3ad184 Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Paddinghttps://medium.com/coding-with-flutter/flutter-layouts-walkthrough-row-column-stack-expanded-padding-5ed64e8f9584 Flutter Layout Cheat Sheethttps://proandroiddev.com/flutter-layout-cheat-sheet-5363348d037e 레이아웃 Flutter 영상 #1https://codingwithflutter.com/

Flutter App Tutorial #1이 글의 모든 내용은 udemy 강좌를 공부하고 따라해본 내용입니다.https://www.udemy.com/dart-and-flutter-the-complete-developers-guide완성 된 형태이다.첫 화면에서 오른쪽 아래 플로팅 버튼 클릭시 오른쪽 화면처럼 이미지와 글자를 가진 뷰가 하나씩 추가되는 형태이다.소스는 http json 을 통해서 가져왔다.소스는 https://github.com/bear2u/flutter-sample-pic.git 에서 확인가능하다. main.dart 시작flutter는 첫진입은 일반적으로 lib/main.dart 로 시작된다.매트리얼 테마를 사용하기 위해서 import를 한다.runApp 은 메테리얼 라이버러리를 통해 실..

Await / Future 비동기 함수 호출Http 로 통신할때 일반적으로 비동기로 호출을 하는 편이다. 비동기란 함수 호출시 블럭이 되지 않고 한번 다 훝고 콜백식으로 완료가 됐을 경우 다시 결과를 받는 경우를 말한다.만약 아래와 같은 코드에서 실행시 결과값은 마지막에 'I got the data' 로 떨어지게 된다.그리고 자바스크립트에서 Promise 형태와 비슷한 걸 볼수 있다.import 'dart:async'; void main () { print('1. start to fetch data'); get('http://weasds.com') .then((data) { print(data); }); print('3. finish call to fetch the data'); } Future get(..