티스토리

조용한 담장

검색하기

블로그 홈

조용한 담장

iosroid.tistory.com/m

iosroid 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

공유: Rive + ML Kit 카메라 로 얼굴을 캡쳐하여 Google's ML Kit Face Detection for Flutter 으로 코의 위치를 얻고 Rive 로 만든 아바타 이미지에 애니메이션 효과를 만듬. 내 얼굴(코) 가 움직이는 위치로 아바타 얼굴이 변함. 간단하면서도 참고하기 좋은 예제. https://medium.com/@maurobeltrame12/flutter-rive-ml-kit-337f05d59692 Flutter + Rive + ML Kit 🤯 Hi everyone! 🖖 medium.com https://github.com/Mauro124/avatar_animation GitHub - Mauro124/avatar_animation: Fusion of Flutter + Rive + ML Kit for anim.. 공감수 0 댓글수 0 2022. 10. 4.
Storybook, Monarch reddit 에서 업어 온 소식. www.reddit.com/r/FlutterDev/comments/maql0s/announcing_monarch_a_flutter_tool_for_developing/ Announcing Monarch: A Flutter tool for developing widgets in isolation Posted in r/FlutterDev by u/monarch_app • 98 points and 12 comments www.reddit.com Storybook 같은 툴을 내부적으로 만들어 쓰다가 공개하게 됐다고 한다. React 맛보느라 Storybook 도 조금 알게 되었는데 이미 Flutter 도 지원중이었다. github.com/storybookjs/native sto.. 공감수 0 댓글수 0 2021. 3. 23.
Flutter 2.0 관련 모음 Hello Flutter 2.0 medium.com/flutter-korea/hello-flutter-2-0-12b56766a4cf Hello Flutter 2.0 오늘 오전 2시 30분에 시작 된 Flutter Engage 행사에서는 Flutter 2.0의 Release 가 발표 되었습니다. medium.com Flutter의 지원 플랫폼 확장 (Web & Desktop) - 데모: flutter.gskinner.com Apple Silicon 지원 Flutter의 Web Platform 지원이 Stable 채널로 전환 - 데모: flutterplasma.dev/ Flutter for Linux Flutter Embedded (with Toyota) Dart Update 2.12 AdMob의 인라인 배.. 공감수 0 댓글수 0 2021. 3. 4.
공유: Best Resources to Learn Flutter & Dart tltemplates.com/learn-flutter Best Resources to Learn Flutter & Dart Flutter is a UI toolkit, developed by Google, and you can use it to create a beautiful native app for desktop, mobile, and web. For faster development and native performance, you can choose Flutter for building an app. Hot Reload and customizable widgets a tltemplates.com flutter 와 dart 를 공부하는데 참고할 만한 사이트와 자료를 정리한 내용한 곳이다. Onli.. 공감수 0 댓글수 0 2021. 2. 17.
공유: Learn Flutter Life Cycle In 10 Minutes Youtube: Learn Flutter Life Cycle In 10 Minutes youtu.be/CjloInz3-I0 InitState First Lyfecycle method that is called. Called when this object is inserted into the tree. The framework will call this method exactly once for each State object it creates. DidChangeDependencies Second Lifecycle method that is called. Called every time a dependency change. Called when a dependency of this element chan.. 공감수 2 댓글수 0 2020. 11. 30.
Flutter Package: school_ui_toolkit 다양한 디자인의 위젯을 제공하는 패키지. school_ui_toolkit https://pub.dev/packages/school_ui_toolkit school_ui_toolkit | Flutter Package A basic UI toolkit to get you started with flutter application development. A collection of over 18+ custom widgets such as Calendar, Buttons with busy indicator and more. pub.dev https://github.com/bprayush/school-ui-toolkit bprayush/school-ui-toolkit A basic UI toolkit to get.. 공감수 0 댓글수 0 2020. 7. 30.
Flutter Gems flutter package 찾는데 유용한 사이트 https://fluttergems.dev/ Flutter Gems - A Curated Package Guide for Flutter Flutter Gems is a curated package guide for the Flutter community which functionally categorizes some of the most useful and popular flutter packages available on pub.dev fluttergems.dev package 들을 기능별, 종류별로 정리해서 보여준다. 필요한 기능을 가진 package를 찾는 데는 https://pub.dev/ 보다 편한면도 있다. pub.dev 는 인기순으로만 나열해.. 공감수 1 댓글수 0 2020. 7. 28.
Flutter: device_apps package 설치된 앱의 목록을 가져올 때 쓸 수 있는 package 이다. 앱의 정보를 얻을 수도 있고 앱의 실행도 가능하다. Android 만 지원한다. https://pub.dev/packages/device_apps https://github.com/g123k/flutter_plugin_device_apps 예제 실행해 보기 예제 코드를 실행해 보자. https://github.com/g123k/flutter_plugin_device_apps/tree/master/example 예제 실행 화면: Platform-specific code 를 사용해서 설치된 정보를 얻어 화면에 뿌리는 동작을 하는데 어떻게 동작하는지 살펴보자... 코드로 동작 살펴보기 android/src/main/java/fr/g123k/dev.. 공감수 0 댓글수 0 2020. 6. 11.
Flutter: New Material Motion The motion system https://material.io/design/motion/the-motion-system.html Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io Material Design 의 motion system 은 app 의 navigation 동작을 사용자들이 이해하기 쉽도록 도와주는 몇개의 transition pattern 의 정의를 모아놓은 것이다. transition patter.. 공감수 0 댓글수 0 2020. 5. 22.
Flutter 1.17 Announcing Flutter 1.17 Announcing Flutter 1.17 Includes Metal support for faster iOS performance, new Material components, new Network tracking tooling and more! medium.com 기본 네비게이션의 경우 20~37% 성능향상 단순 iOS 애니메이션의 경우 CPU/GPU 의 40% 사용 감소 app 크기 감소, 예제 Flutter Gallery 안드로이드앱의 경우 9.6MB 에서 8.1MB 18.5% 축소 큰 이미지를 빠르게 스크롤링 하는 경우 70% 메모리 사용 감소 iOS 앱은 Metal 을 지원하는 기기인 경우 OpenGL 대신 기본으로 사용. 50% 까지 렌더링 성능향상.. 공감수 0 댓글수 0 2020. 5. 7.
Flutter Open Source App 1 : Time Cop reddit 에 올라온 오픈소스 앱 입니다. Hacker News 에도 올렸네요. Time Cop A time tracking app that respects your privacy and gets the job done without getting too fancy. https://timecop.app 타임 경찰 타임 경찰 개인 정보를 존중하고 너무 화려하지 않고 작업을 수행하는 시간 추적 앱. 풍모 오프라인 전용, 모바일 전용 (iOS / Android) 완전 비공개 — 추적 / 스파이 / 광고 등이 없습니다. 버튼을 한 번만 누르면 시작할 수있는 여러 개의 병렬 타이머로 작업을 추적 타이머를 프로젝트와 연결하여 작업 그룹화 번거 로움없이 언제든지 타이머를 시작, 중지, 편집 및 삭제 기간 및 프로젝.. 공감수 0 댓글수 0 2020. 4. 2.
WHO 에서 Flutter 로 앱 개발 중 WHO 가 Flutter 로 앱을 개발하고 있다는 소식... https://twitter.com/chimon1984/status/1242946241367023616 Ryan Edge 💙 on Twitter “The WHO app is being migrated from ionic to Flutter. Get involved! https://t.co/CnY3bsiRDA” twitter.com https://github.com/WorldHealthOrganization/app WorldHealthOrganization/app World Health Organization App. Contribute to WorldHealthOrganization/app development by creating an acc.. 공감수 0 댓글수 0 2020. 3. 27.
Flutter: Staggered Animations 여러 animation 을 시차를 두고 연속적으로 만드는 방법을 설명한 아래의 페이지의 내용을 살펴보자. https://flutter.dev/docs/development/ui/animations/staggered-animations Staggered Animations {{site.alert.secondary}} What you’ll learn * A staggered animation consists of sequential or overlapping animations. * To create a staggered animation, use multiple Animation objects. * One AnimationController controls all of the Animations. * Ea.. 공감수 0 댓글수 0 2020. 2. 19.
Flutter: Hero 앱의 페이지(Page) 또는 루트(Route) 사이의 이동할 때 animation 을 만들어주는 위젯이다. 특히 이동하는 페이지 사이에 공통된 이미지 영역이 있다면 이를 기반으로 animation 을 만들기 위해 사용할 수 있다. 예를 들어 쇼핑앱의 제품 사진으로 된 목록중 하나를 선택하면 그 사진이 커지면서 제품의 상세 내용을 보여주는 동작을 생각해 볼 수 있다. 위와 같이 이동하는 페이지 사이의 공통되게 보여주는 부분에 대한 animation 을 만드는데 사용한다. Hero({ Key key, @required Object tag, CreateRectTween createRectTween, HeroFlightShuttleBuilder flightShuttleBuilder, HeroPlaceholder.. 공감수 2 댓글수 0 2020. 2. 12.
Flutter : Animation Animation library Flutter 의 animation system 을 구현한 animation library 을 살펴보자. import package:flutter/animation.dart flutter 는 animation 을 값의 변화와 시간을 통해 표현한다. Flutter represents an animation as a value that changes over a given duration, and that value may be of any type. animation 의 시작의 값이 0 이라면 끝나는 값이 100 이라는 수의 값으로 표현한다. 이 변화되는 값은 다양한 속성에 적용되어 그 변화에 따른 animation 을 만들어 낸다. 예를들어 opacity(불투명도) 값을 .. 공감수 8 댓글수 3 2020. 2. 7.
플러터 프로젝트 코멘트 지우기 (remove comments) flutter create (플러터 새 프로젝트 생성) 명령을 통해 새로 생성된 프로젝트 코드에는 친절한 코멘트가 포함되어 있습니다. 하지만 결국 지워야할 대상인데, Android Studio 에서 쉽게 지우는 방법을 flutter twitter 에서 가져와봤습니다. 1. Ctrl + R (Replace) Replace 화면에서 Regex 를 선택합니다. 2. //.* 를 입력하고 Replace all 버튼을 클릭 합니다. 3. 창 위에서 마우스 오른쪽 버튼을 클릭하여 Reformat Code with dartfmt 를 선택합니다. 4. 끝. From Flutter Twitter : https://twitter.com/FlutterDev/status/1220753228943515648 Flutter on.. 공감수 0 댓글수 0 2020. 1. 28.
[플러터] Flutter 1.12 release flutter 1.12 가 2019년 12월 12일 자로 릴리즈 되었다. Android 10 지원 업데이트 iOS 13 visual refresh + dark mode + CupertinoContextMenu, CupertinoSlidingSegmentedControl 위젯 추가 Add to App (Flutter module 을 기존 Android or iOS app 추가하는) 기능 추가 : Add Flutter to existing app Material dark mode 지원 ButtonBar 와 AlertDialog text overflow 를 막도록 향상 TweenAnimationBuilder 추가 : TweenAnimationBuilder video iPhoneX/Xs 에서 스크롤 퍼포먼스 이.. 공감수 0 댓글수 0 2019. 12. 12.
Flutter : Custom font Flutter app 에 custom font 를 사용해 보자. Google Fonts 에서 Tomorrow 폰트를 적용해 본다. pubspec.yaml pubspec.yaml 파일에 font 파일 (ttf) 을 추가한다. fonts: - family: Tomorrow fonts: - asset: fonts/Tomorrow-Regular.ttf - asset: fonts/Tomorrow-Bold.ttf weight: 700 - asset: fonts/Tomorrow-Italic.ttf style: italic 3개의 파일을 추가했는데 font family 이름은 'Tomorrow' 이다. bold 는 weight 속성값이 있다. weight 값은 100에서 900까지 100 단위로 값이 있고 FontSt.. 공감수 0 댓글수 0 2019. 11. 20.
Flutter : Asset Asset Flutter 앱에 이미지나 아이콘 같은 리소스 파일인 asset 을 살펴보자. Asset 은 앱에 포함되며 실행시 사용가능하다. 아래의 것들이 포함될 수 있다. Common types of assets inclde static data (for example, JSON files), configuration files, icons, and images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP). pubspec.yaml asset 에 포함될 파일들은 pubspec.yaml 에 작성되어야 앱에 포함된다. 프로젝트 에서 asset 을 위한 폴더를 만들어 파일을 넣고 그 경로를 파일 이름과 함께 추가한다. 아래와 같이 asset 폴더와 ph.. 공감수 1 댓글수 0 2019. 11. 20.
Flutter : shared_preferences shared_preferences Flutter 의 패키지 중 단순한 key-value 타입의 데이터를 저장할 수 있는 기능을 제공한다. 간단하고 특별히 관리되지 않아도 되는 적은 양의 데이터를 다룰 때 간단히 이용할 수 있다. NSUserDefaults (on iOS) 와 SharedPreferences (on Android) 이 사용된다. Example '+' FloatingActionButton을 누르면 아래의 예제 코드 함수가 호출되어 'count 카운트값' 스트링을 value 로, count 숫자 값을 key 로 저장한다. 저장된 값을 key 값인 카운트 값을 통해 value 를 모두 읽어 List로 그린다. int _counter = 0; List members =.. 공감수 0 댓글수 0 2019. 11. 11.
Flutter : path_provider path_provider, read and write files Flutter 의 path_provider package 와 dart:io library (File, Directory) 를 이용해 파일을 쓰고 지우는 방법을 보자. path_provider 앱이 일반적으로 사용하는 저장 위치들을 얻을 수 있는 패키지 이다. Temporary directory: 캐쉬같이 임시로 데이터를 저장하는 공간이고 언제든지 삭제될 수 있다. iOS 의 NSCachesDirectory와 Android 의 getCacheDir() 의 값에 해당하는 위치이다. Documents directory: 해당 앱만의 저장공간이며 앱이 삭제되면 없어진다. iOS 의 NSDocumentDirectory 와 Android 의 AppDa.. 공감수 1 댓글수 0 2019. 11. 11.
Flutter : sqflite package (SQLite plugin) sqflite Flutter 의 SQLite plugin 을 살펴보자. sqflite 기본적인 동작 코드는 간단하다. db를 열고 query 처리하면 된다. sqflite functions getDatabasesPath() : database 가 저장되는 기본 위치 경로를 얻는다. openDatabase() : 지정 위치에 있는 database 를 연다. deleteDatabase() : 지정 위치에 있는 database 를 삭제한다. 그 외의 함수는 문서를 참조한다. sqflite database functions query 문자열을 그대로 사용하는 functions execute(), rawInsert(), rawQuery(), rawUpdate(), update(), rawDelete() examp.. 공감수 0 댓글수 1 2019. 11. 8.
Flutter : permission_handler permission_handler 사용자에게 앱 기능을 위한 권한을 요구하는 Flutter 패키지 이다. https://pub.dev/packages/permission_handler 이 패키지를 사용하기 위해서 이 앱이 시스템에 요구하는 권한에 대한 정보를 추가해야 한다. Android 는 AndroidManifest.xml, iOS 는 Info.plist 파일에 내용을 추가해야 한다. 안드로이드 환경에서 테스트 해 보았다. 패키지 설치 pubspec.yaml 파일 수정. dependencies: path_provider: ^1.4.0 AndroidManifest.xml 수정 runApp(MyApp()); class MyApp extends StatelessWidget { ... 패키지를 추가한다. 아.. 공감수 0 댓글수 0 2019. 11. 5.
Flutter : DataTable DataTable Material Design 의 데이터 테이블을 그려주는 Flutter Widget 이다. DataTable class DataTable({Key key, @required List columns, int sortColumnIndex, bool sortAscending: true, ValueSetter onSelectAll, double dataRowHeight: kMinInteractiveDimension, double headingRowHeight: 56.0, double horizontalMargin: 24.0, double columnSpacing: 56.0, @required List rows }) columns 리스트는 표의 첫 행에 들어가는 데이터 리스트 이며 각 열의 이름.. 공감수 2 댓글수 3 2019. 11. 4.
Flutter : Draggable Draggable 위젯을 드래그 하여 움직일 수 있게 해보자. Draggable class Draggable({Key key, @required Widget child, @required Widget feedback, T data, Axis axis, Widget childWhenDragging, Offset feedbackOffset: Offset.zero, DragAnchor dragAnchor: DragAnchor.child, Axis affinity, int maxSimultaneousDrags, VoidCallback onDragStarted, DraggableCanceledCallback onDraggableCanceled, DragEndCallback onDragEnd, VoidCallbac.. 공감수 1 댓글수 0 2019. 10. 28.
Flutter : SelectableText SelectableText flutter Text 위젯은 화면에 글자를 그리지만 사용자가 텍스트를 복사는 할 수 없다. TextField 위젯 처럼 텍스트를 복사할 수 있는 위젯을 보자. SelectableText SelectableText(String text, { Key key, InputlessFocusNode focusNode, TextStyle style, TextAlign textAlign: TextAlign.start, TextDirection textDirection, Radius cursorRadius, Color cursorColor, DragStartBehavior dragStartBehavior: DragStartBehavior.down, bool enableInteractiveSe.. 공감수 0 댓글수 0 2019. 10. 21.
Flutter : Navigator Flutter : Navigator 앱 화면 간 이동을 구현할 때 사용한다. 또는 특정 위젯 간의 이동이 될 수도 있다. navigator 를 이용한 예제를 만들어 보자. 예제코드 기본 코드 구조는 아래와 같다. 앱의 각각 다른 화면을 page로 구분하여 각각을 위젯으로 구성해 볼 것이다. App's home page Homepage 에서 page1, page2, page3, page4 로 이동할 수 있는 버튼을 가진 화면을 구현해보자. Navigator Navigator({Key key, String initialRoute, @required RouteFactory onGenerateRoute, RouteFactory onUnknownRoute, List observers: const [] }) A w.. 공감수 1 댓글수 0 2019. 10. 17.
Flutter : Text Widgets Flutter : Text Widgets Flutter 의 텍스트와 관련된 위젯들을 살펴보고 테스트 해보자. 텍스트를 그리는 Text 와 RichText 가 있고, 그래픽적 효과를 적용할 수 있는 TextStyle, 글자, 문장을 모아 문단을 구성할 수 있게 해주는 TextSpan 이 있다. TextStyle class TextStyle({bool inherit: true, Color color, Color backgroundColor, double fontSize, FontWeight fontWeight, FontStyle fontStyle, ... }) An immutable style in which paint text 화면에 그려지는 텍스트에 다양한 효과를 적용하기 위한 속성들을 지정하는 데에 사.. 공감수 5 댓글수 0 2019. 10. 14.
Flutter : State management (Provider) Flutter : State management (Provider) 앱의 화면 또는 위젯 간에 정보 공유를 위한 방법에 대한 설명을 살펴보자. Ephemeral state and App state Ephemeral state (sometimes called UI state or local state) is the state you can neatly contain in a single widget. state 를 두 종류로 나누어 설명한다. Ephemeral state 는 한 위젯안에서만 사용하는 state 로써, 앱으로 생각하면 한 화면 안에서만 영향을 주는 변수들을 예로 생각해 볼 수 있다. 데이터를 로딩하면서 프로그레스 바를 그리는 화면이 있다면 그 이후의 앱 페이지 (혹은 위젯) 에게는 로딩 상태.. 공감수 4 댓글수 1 2019. 10. 11.
Flutter : declarative UI Flutter의 UI 개념 Introduction to declarative UI declarative UI 라고 소개하는 내용을 보자. 앱 화면을 왼쪽에서 오른쪽처럼 구성을 변경할 때 ViewB 의 인스턴스 b 의 배경색 값을 변경하고, 자식 인스턴스 인 c1, c2 를 삭제한 후 c3 를 새로 만들면 된다. 위 동작은 보통 아래와 같은 코드 형식을 가질 것 이다. // Imperative style b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) Flutter 는 각각의 구성요소가 위젯이다. Flutter 는 위젯을 변경해야 하는 상황이 생길때 기존의 것을 변경하는 것이 아니라 지우고 새로 다시 만든다. 위 그림처럼 변경하면.. 공감수 0 댓글수 0 2019. 10. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.