📱 Mobile 검색 결과

해당 글 46건

BLoC (Bisuness Logic Component) 디자인 패턴

데이터를 Bloc에 전부 몰아 놓고 stream을 통해 해당 데이터가 변화할 때마다 UI를 업데이트하는 디자인 패턴이다. 특정 라이브러리, 패키지가 아니기 때문에 어느 프레임워크, 언어에서나 React에서도 RxJS를 활용해서 Bloc 패턴을 사용할 수 있다. bloc패턴은 비즈니스 로직과 UI를 분리한다. bloc에 상태와 관련된 데이터들이 모여있으며 화면은 데이터 관련 처리를 하지 않고 단순히 bloc에서 데이터를 받아 화면에 출력합니다. Bloc에 일괄적으로 데이터를 모아 처리한다는 점에서는 상태 관리 Redux와 비슷하며 값이 변하는 것을 감지(구독)해서 새로 렌더한다는 점에선 Reactive programming과 닿아있습니다. 데이터를 담당하는 코드와 UI를 담당하는 코드가 분리되면서 좀 더 ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 5. 13:44

stream, StreamBuilder

stream은 정보의 흐름으로 비디오, 오디오 등 연속적인 정보를 말합니다. 비동기적으로 연속적인 데이터 흐름을 처리하는 방식을 Stream이라고 보시면 될 것 같습니다. 자세한 내용은 buffer, stream 등을 다룬 포스트가 따로 있으니 그 글을 살펴보시고, 여기서는 flutter의 StreamBuilder를 활용해보는 코드를 작성해보겠습니다. 우선 간단한 카운터 기능을 하는 위젯은 StreamBuilder를 통해 만들어보겠습니다. 물론 간단히 stful 위젯에서 setState로 count값을 조정하는 식으로 코딩하는 것이 훨씬 당연한 일일터입니다만 연습이니까... 우선 일반적인 state를 활용하는 방식입니다. class Home extends StatefulWidget { @override ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 5. 10:18

flutter 테스트 하기

전에 언급한 저이 있는데, test 폴더 내에 작성한 코드를 통해 테스트를 진행할 수 있다. 간단하게 http를 통해 api 정보를 받아오는 테스트 코드를 작성해보았다. test 함수에 테스트 이르뫄 실행할 함수를 작성하면 된다. response.statusCode가 200이 될 것이라 기대하고 테스트를 돌려보았다. (vscode기준 Run을 누르면 된다) import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:flut/main.dart'; import 'package:http/http.dart' as http; void main() { test("http 통신 테스트", ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 5. 08:12

Android app 빌드 및 플레이 스토어 배포 과정

(https://flutter-ko.dev/docs/deployment/android) (한국어) (https://flutter.dev/docs/deployment/android) (영어) (https://here4you.tistory.com/198) 잘 설명한 한국어 블로그 Android 앱 출시 준비하기 Flutter 앱을 개발하는 동안, 커멘드 라인에서의 `flutter run`을 실행하거나IDE에 있는 툴바 **Run** 과 **Debug**를 선택하여 앱을 테스트할 수 있습니다. Flutter는 기본적으로 앱의 _debug_ 버전을 빌드합니� flutter-ko.dev Adding a launcher icon 번역할 필요 없이 간단하게 아래 포스트로 해결합시다. https://darrengwon..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 26. 00:13

FireStore 활용하기

준비물 firebase_core cloud_firestore => Firestore.instance 생성, 활용 https://github.com/FirebaseExtended/flutterfire FirebaseExtended/flutterfire 🔥 Firebase plugins for Flutter apps. Contribute to FirebaseExtended/flutterfire development by creating an account on GitHub. github.com firebase_core와 cloud_firestore를 설치한 후 실습해봅시다. FireStore 생성 데이터베이스를 만들어 봅시다. 스토어의 위치는 가까운 곳으로 하면 됩니다. asia-northeast 3가 서울..
📱 Mobile/🔥 Firebase + Flutterfire 2020. 5. 24. 09:04

local 회원가입/ 유저 정보 표시 / 로그인 / 로그아웃 (outdated)

https://darrengwon.tistory.com/620 firebase_auth 를 활용한 로컬 로그인 유저 상태 체크 : onAuthStateChanged auth 상태가 변경되는 것을 감지합니다. 아래와 같이 작성하면, 유저가 로그인 했을 때는 MainPage()를 안 했을 때는 AuthPage()를 보여줍니다. home: StreamBuilder ( strea.. darrengwon.tistory.com 새로 글을 썼습니다. 당연히 firebase_auth와 firebase_core를 설치한 이후에 이용할 수 있습니다. flutterfire의 경로 (https://github.com/FirebaseExtended/flutterfire)에 가서 하나씩 설치해봅시다. FirebaseExtende..
📱 Mobile/🔥 Firebase + Flutterfire 2020. 5. 24. 07:47

flutterfire를 활용한 google oauth

준비물 firebase_auth => FirebaseAuth.instance 생성 firebase_core 우선 firebase에서 앱 등록을 먼저 합시다 https://darrengwon.tistory.com/368?category=888346 firebase_auth와 firebase_core를 설치한 이후에 이용할 수 있습니다. 여기서 firebase_core는 말그대로 코어이므로 무엇을 사용하든 설치해야 합니다. flutterfire의 경로 (https://github.com/FirebaseExtended/flutterfire)에 가서 하나씩 설치해봅시다. FirebaseExtended/flutterfire 🔥 Firebase plugins for Flutter apps. Contribute to..
📱 Mobile/🔥 Firebase + Flutterfire 2020. 5. 24. 06:28

flutter에서 자주 사용되는 기술

flutter에서 자주 사용되는 기술 0. ctrl + click으로 해당 위젯이 요구하는 속성 찾아보기 (이게 제일 중요) 예를 들어보겠습니다. 아 CircleAvatar는 stless 위젯이고 모든 속성은 {} 에 들어있으므로 선택적으로 값을 줄 수 있겠군요. 따라서 CircleAvatar(child: ...., backgroundColor: .... ) 이렇게 값을 줄 수 있겠습니다. * 이는 Dart의 문법에서 클래스의 생성자를 정의할 때 {}를 씌웠느냐, 씌우지 않았느냐의 차이와 똑같습니다. 아시죠? class CircleAvatar extends StatelessWidget { /// Creates a circle that represents a user. const CircleAvatar({..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 23. 19:10

flutter 애니메이션 : Hero / AnimationController / CurvedAnimation / 그 밖의 package들

Hero (https://flutter.dev/docs/development/ui/animations/hero-animations) Hero 위젯으로 감싸고 동일한 태그를 주면 페이지 이동시 애니메이션이 적용된다. 반드시 하나만 연결할 필요는 없고 여러군데 연결하는 것도 가능하다. Hero( tag: 'logo', child: Container( height: 200.0, child: Image.asset('images/logo.png'), ), ), Hero( tag: 'logo', child: Container( height: 200.0, child: Image.asset('images/logo.png'), ), ), Custom Animation (linear) 커스텀 애니메이션을 사용하기 위한 3..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 23. 10:51

dart.io 패키지를 활용한 플랫폼(iOS, Android) 감지하기

dart.io의 platform.dart의 Platform 클래스를 이용해서 플랫폼을 감지할 수 있다. 이를 이용해서 iOS환경에서는 쿠퍼티노를 사용해보도록 하자. 🚀 import의 기술 import 'dart:io' show Platform; // Platform 클래스만 씀 import 'dart:io' hide Platform; // Platform 클래스만 빼고 씀 import 'dart:io' as Platform; // Platform 이란 이름으로 dart:io를 활용함 🚀 Platfrom.is... 를 사용하여 플랫폼 감지 import 'dart:io' show Platform; DropdownButton androidDropDownButton() { return DropdownButton..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 23. 04:29