Android
iOS
Dart
Flutter
FlutterWeekly

Flutterウィークリーとは?

FlutterファンによるFlutterファンのためのニュースレター
https://flutterweekly.net/

この記事は#25の日本語訳です
https://mailchi.mp/16ec96f0a9cd/flutter-weekly-311173

アナウンス

新しいFlutter開発ツール - Android Studio 3.2 Beta サポート

https://groups.google.com/forum/?linkId=52478434&linkId=53673788#!topic/flutter-dev/VLqlYXWvUvE
Android Studio用FlutterプラグインがAndroid Studio 3.2をサポートしました。ログビュー他色々なバグフィックス

Screen Shot 2018-06-28 at 10.14.18 AM.png

Visual Studio向けDartプラグイン

https://dartcode.org/releases/v2-15/
Visual Studio Codeユーザー向けの新しいプラグインが公開されました。テストランナーと他色々な新しい機能を実装

test_tree.png

読み物&チュートリアル

FacebookリアクションアイコンアニメーションをFlutterで実装

https://blog.usejournal.com/facebook-reactions-with-flutter-9019ce8b95b8
FacebookリアクションツールバーをFlutterウィジェットで実装する方法を解説

Screen Shot 0030-07-06 at 12.16.34.png

本物のクロスプラットフォーム開発環境Flutter

https://www.smashingmagazine.com/2018/06/google-flutter-mobile-development/
Flutterの紹介と他のモバイル開発環境を比較した記事

Screen Shot 0030-07-06 at 12.27.50.png

ViewとViewモデルを分離することでFlutterコードの可読性を上げる

https://blog.usejournal.com/easily-navigate-through-your-flutter-code-by-separating-view-and-view-model-240026191106
ステートフルウィジェットはコードが肥大化しがちなのでUIとそれ以外を分離しよう!

1_QeKR2LofWOK2psNqpq_O6w.png

Flutterアプリでテキストインプット

https://flutterdoc.com/implementing-text-input-in-flutter-apps-3630afb49ecd
Flutterのテキストインプットを実装

Screen Shot 0030-07-06 at 12.31.34.png

きれいなUIコードを書くためのTips

https://flutter.rocks/2018/06/18/putting-build-methods-on-a-diet/
Paddingの嵐などなどFlutterのコードを汚くする原因とその解決方法を説明

rescuing_princess_with_flutter.png

Flutter: Reduxを使ってマルチタブの入力フォームをコントロール

https://hillelcoren.com/2018/06/18/flutter-using-redux-to-manage-complex-forms-with-multiple-tabs-and-relationships/
Reduxを使ってパーツ間のステート管理をどうするか

screenshot_1528817346 (1).png

3Dトランストームウィジェット

https://medium.com/flutter-io/perspective-on-flutter-6f832f4d912e
ウィジェットを3Dで回転させるにはどうするかを解説

1_WdpLQEC_L1PYDO1KgxxfMQ.gif

Flutterで3Dフリップアニメーション

https://medium.com/flutter-community/make-3d-flip-animation-in-flutter-16c006bb3798
3Dフリップエフェクトの作り方を解説。作ったものはプラグインとしても公開されている

1_vDimOOn9HYlJyX3bDqNFjA.gif

Flutterで光るエフェクト

https://medium.com/flutter-community/make-shimmer-effect-in-flutter-dbe7a1bfd980
クラシックな光輝くエフェクトを実装

1_rV4-EajphSqKhKNMULo6gg.gif

Flutterウィジェットって結局何だ?

https://medium.com/fluttery/what-even-are-flutter-widgets-ce537a048a7d
Flutterウィジェットが何なのか、今までの古臭いモバイル開発とは何が違うのかを解説

1_y0VtCCdwj9zhk9dGu7wlog.png

Flutter: Push, Pop, Push

https://medium.com/flutter-community/flutter-push-pop-push-1bb718b13c31
Flutterのナビゲーションで使用するPush, Pop, Pushについて解説

1_aaZxoLUbKdFPgiIkBAmw7w.png

Widgets, RenderObject, Elementsについて

https://medium.com/flutter-community/flutter-what-are-widgets-renderobjects-and-elements-630a57d05208
Flutterの中身を理解するのに役立つ記事

QRコード生成、スキャナーとシェア

https://medium.com/@alfianlosari/building-flutter-qr-code-generator-scanner-and-sharing-app-703e73b228d3
QRコードをFlutterで使う方法を解説

1__yQd-oQ-swt1oQwY5qzwcQ@2x.png

ウィジェットを分割してパフォーマンス改善

http://cogitas.net/improve-flutter-app-performance-split-widgets/
MVPアーキテクチャを適用してアプリを分割してパフォーマンスを向上するテクニックを紹介

visibilityのコントロール

https://medium.com/flutter-io/managing-visibility-in-flutter-f558588adefe
Visibilityに関するコンセプトとそのパフォーマンスに対する影響

Flutterアプリに広告を実装

https://proandroiddev.com/add-ads-to-your-app-now-98716d0d6e69
Flutterアプリに簡単にAdMob広告を表示する

1_jS_G1wzIlb8-0wOjaF53zA.png

Flutterでダイナミックにテーマを適用

https://proandroiddev.com/how-to-dynamically-change-the-theme-in-flutter-698bd022d0f0
テーマを即座に反映する方法を紹介

1_3bJPBzNscZ5T5TB1tfxhlA (1).png

Flutter – Slivers

http://tphangout.com/flutter-slivers/
Sliverの使い方を解説。動画とソースコード月

Webp.net-gifmaker-1.gif

Android開発者向けFlutter解説!LinearLayoutを実装する方法

https://proandroiddev.com/flutter-for-android-developers-how-to-design-linearlayout-in-flutter-5d819c0ddf1a

1_kE-KoY8nR4qT8nYHPrV0Pw.jpeg

Flutterドキュメントを簡単に検索するChrome拡張

https://medium.com/@chemamolins/automatically-search-for-flutter-documentation-from-any-web-page-4724b758132b
1_X7F0Pp8niLN1dwDrxa9YRQ.jpeg

ビデオ&メディア

Flutter: MLKit チュートリアル

https://youtu.be/vT6gNFE0GBw
Flutterアプリで簡単にMLKitを使用する為のチュートリアル

Screen Shot 0030-07-06 at 13.12.35.png

Flutter Challenge: Springy Slider

https://youtu.be/ZsKhfaWPcSs
A new challenge by Fluttery. This times he recreates a cool spring effect on a slider.

Screen Shot 0030-07-06 at 13.14.01.png

Flutter rows & columns (3 of 6)

https://youtu.be/U7Caol8JQL8
Google公式動画の第3回目
Screen Shot 0030-07-06 at 13.16.23.png

Flutter ステート管理

https://youtu.be/HLop7s2sJ7Q

Screen Shot 0030-07-06 at 13.34.08.png

FlutterでUIを作る方法

https://youtu.be/qV4tAcrMa_A
Flutterでアプリを作るための手順を紹介

Screen Shot 0030-07-06 at 13.47.42.png

ライブラリ&コード

p5.dart

https://github.com/codeanticode/p5.dart
P5はProcessingフレームワークのJs実装で、codeanticodeがFlutterライブラリを開発

gradient_animation

https://github.com/brianegan/gradient_animations
グラデーション付きアニメーション

Screen Shot 0030-07-06 at 14.23.57.png

flutter_simple_dependency_injection

https://github.com/jonsamwell/flutter_simple_dependency_injection
Flutter用シンプルDIライブラリー

FirestoreHelpers

https://github.com/fluttercommunity/firestore_helpers
Firestoreを簡単に使うためのヘルパーライブラリ

Screen Shot 0030-07-06 at 14.26.29.png

ObjectDB

https://github.com/netz-chat/objectdb
純Dart製のNoSQLライブラリ

flutter_awesome_list

https://github.com/samarthagarwal/FlutterAwesomeList
かっこいいListサンプル

Screen Shot 0030-07-02 at 11.49.40.png

Animated Icons

https://github.com/ibhavikmakwana/AnimatedIcons
Flutterに含まれるアニメーションアイコンを表示するサンプルアプリ

AnimatedIcon.gif

Draggable Scrollbar

https://github.com/fluttercommunity/flutter-draggable-scrollbar
ドラッグ可能なスクロールバー。大量のリストを表示するときに便利ですね

demo (1).gif

immutable_state

https://github.com/thosakwe/immutable_state
軽量UIステート管理フレームワーク

basal

https://gitlab.com/dkovacevic15/basal
スケーラブルでパフォーマンスに優れたスート管理ライブラリ

Image Cropper

https://github.com/hnvn/flutter_image_cropper
画像切り取りプラグイン(Android,iOS両対応)

android.gif

Duration Picker for flutter

https://github.com/cdharris/flutter_duration_picker
継続時間を選択するためのタイムピッカーウィジェット

example.gif

painter

https://github.com/epnw/painter
指でお絵かきが出来るpaintウィジェット

demo.gif

  • 読み物&チュートリアル
  • ビデオ&メディア
  • ライブラリ&コード