올해는 머신러닝이다.

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

JSON 핸들러서버와 통신시 제일 자주 사용되는 형태가 JSON 이다. 그럼 다트에서는 어떻게 다룰수 있는 지 살펴보겠다.테스트 환경은 https://dartpad.dartlang.org/ 에서 진행한다.import 'dart:convert'; void main() { var rawJson = '{"url": "http://blah.jpg","id":1}'; var parsedJson = json.decode(rawJson); print(parsedJson); print(parsedJson['url']); } ............. {url: http://blah.jpg, id: 1} http://blah.jpg그리고 모델 클래스를 만들어서 매핑하고자 할때에는 값을 키값을 줘서 값을 가져온다음 set ..

Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ StatefulWidgetStatefulWidget은 위젯에 변경되는 state 를 담고 있는 커스텀 위젯을 뜻한다.그럼 어떤식으로 만들어지는 지 살펴보자.우선 StatefulWidget 을 extends 한다.class App extends StatefulWidget { } State를 상속받은 클래스를 만든다.class AppState extends State { int counter = 0; Widget build(context) { return MaterialApp( home: Scaffold( body: Text('$counter'), appBar: AppBar( title: Text("L..

Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ 커스텀 위젯 추가하나의 파일에 많은 코드를 추가시 복잡해지고 길어지는 단점이 있다. 이럴때 파일로 빼서 분리를 할수 있다.임포트 방법내부에 src 폴더를 만들고 그 안에 app.dart 파일을 만들자.클래스 구조를 만들수 있다.import 매트리얼Stateless(StatefulWidget)Widget class 생성Build 함수 구현main.dart 에서 src/app.dart 호출# src/app.dart import 'package:flutter/material.dart'; class App extends StatelessWidget { Widget build(context) { return..

Scaffold 위젯 추가 Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ 기본적으로 모바일 구조가 상단에 Appbar가 있으며 하단에 바텀시트가 있으며 floating action button이 있다.그 구조를 기본적으로 지원하는 하나의 위젯이 Scaffold라고 보면 된다.그럼 하나씩 적용해보자.import 'package:flutter/material.dart'; void main() { var app = MaterialApp( home: Scaffold( appBar: AppBar(), // 추가 ), ); runApp(app); }짜잔~ 이런 타이틀바가 생긴걸 볼수 있다. 이걸 AppBar 라고 한다.그리고 아래 floating butt..

Flutter 시작하기. Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ Flutter는 구글에서 나온 모바일 프레임워크입니다. Reactive Native 와 비슷하다고 보면 될것 같습니다. 네이티브 성격을 가진 하이브리드 앱인 셈이죠.무엇보다 강력한 점은 각 플랫폼(Android, IOS)에 있는 대표 디자인 즉 메테리얼 디자인을 손쉽게 짤수가 있습니다.하지만 플랫폼별로 다르게 나올수가 있는데 그 이유는 메테리얼도 플랫폼에 맞게 바뀌어서 나올 수 있기 때문입니다.만약 IOS 에서 특유의 시스템을 이용하고 싶으면 쿠퍼티노 위젯을 사용하면 됩니다.그 외에도 안드로이드 스튜디어, 비쥬얼 스튜디어 코드등 통합 IDE 도 사용 가능한 점이 큰 메리트입..

다트 기본온라인 다트 편집기에서 실행가능하다.https://dartpad.dartlang.org/함수편기본 출력void main() { var test = "test"; print('test = $test'); }기본값 설정void printMsg(String msg, [String value = 'undefined']) { print('msg = $msg, value = $value'); } void main() { printMsg('1234', '5678'); printMsg('1234'); } ........................ msg = 1234, value = 5678 msg = 1234, value = undefinedname, value 쌍으로 map 형태로 인수 넣기void pri..