Flutterウィークリー #25

# 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をサポートしました。ログビュー他色々なバグフィックス

<img width="716" alt="Screen Shot 2018-06-28 at 10.14.18 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/f77df3ea-b7d7-9b70-bece-8a91ade7795c.png">

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

<img width="560" alt="test_tree.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/fe9358e6-9d36-abaf-7061-cea8c232c198.png">


# 読み物＆チュートリアル

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

![Screen Shot 0030-07-06 at 12.16.34.png](https://qiita-image-store.s3.amazonaws.com/0/129712/486d130e-fc72-af7b-ce6f-316206bfd2f3.png)

### 本物のクロスプラットフォーム開発環境Flutter
https://www.smashingmagazine.com/2018/06/google-flutter-mobile-development/
Flutterの紹介と他のモバイル開発環境を比較した記事

![Screen Shot 0030-07-06 at 12.27.50.png](https://qiita-image-store.s3.amazonaws.com/0/129712/692e1e13-e359-6738-a6ac-682b5e6bc843.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](https://qiita-image-store.s3.amazonaws.com/0/129712/94a6dc90-75c7-9f43-b5fd-249cefca4c36.png)

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

![Screen Shot 0030-07-06 at 12.31.34.png](https://qiita-image-store.s3.amazonaws.com/0/129712/8eb85721-183b-56c5-e0fc-2fcefe1af837.png)

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

<img width="540" alt="rescuing_princess_with_flutter.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/3f9c7211-8117-cc6f-e85b-584b6a41a3c9.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](https://qiita-image-store.s3.amazonaws.com/0/129712/a05a7b47-9c7e-e38a-fb55-0c7ea0ca8646.png)

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

![1_WdpLQEC_L1PYDO1KgxxfMQ.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/db60f3db-dd6d-60ba-c7f1-8b31b48c49d5.gif)

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

![1_vDimOOn9HYlJyX3bDqNFjA.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/81a02d7f-04dd-3709-9456-1d39ee0e7dfb.gif)

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

![1_rV4-EajphSqKhKNMULo6gg.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/12a3eaec-3ba8-8b5a-9821-1a34cf51fb44.gif)

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

![1_y0VtCCdwj9zhk9dGu7wlog.png](https://qiita-image-store.s3.amazonaws.com/0/129712/0916c1a9-7a04-b015-a529-ca4d1014fd52.png)

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

![1_aaZxoLUbKdFPgiIkBAmw7w.png](https://qiita-image-store.s3.amazonaws.com/0/129712/58e7f86f-c2b6-2005-b15d-eedd9530370a.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](https://qiita-image-store.s3.amazonaws.com/0/129712/8d2267f8-fe27-87da-e42e-cb5835d4bf3e.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](https://qiita-image-store.s3.amazonaws.com/0/129712/532ddd4d-220f-b7db-f5af-7e5480e9499b.png)

### Flutterでダイナミックにテーマを適用
https://proandroiddev.com/how-to-dynamically-change-the-theme-in-flutter-698bd022d0f0
テーマを即座に反映する方法を紹介

![1_3bJPBzNscZ5T5TB1tfxhlA (1).png](https://qiita-image-store.s3.amazonaws.com/0/129712/392a6182-a11d-0e46-8cd5-872a87290440.png)

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

![Webp.net-gifmaker-1.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/b71689db-7fb5-360d-8d69-2340510746d8.gif)

### Android開発者向けFlutter解説！LinearLayoutを実装する方法
https://proandroiddev.com/flutter-for-android-developers-how-to-design-linearlayout-in-flutter-5d819c0ddf1a

![1_kE-KoY8nR4qT8nYHPrV0Pw.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/7234f48e-5ecb-6c42-c01b-3607567145ca.jpeg)

### Flutterドキュメントを簡単に検索するChrome拡張
https://medium.com/@chemamolins/automatically-search-for-flutter-documentation-from-any-web-page-4724b758132b
![1_X7F0Pp8niLN1dwDrxa9YRQ.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/440f850b-c2d1-b739-4476-40816ce94e35.jpeg)


# ビデオ＆メディア

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

![Screen Shot 0030-07-06 at 13.12.35.png](https://qiita-image-store.s3.amazonaws.com/0/129712/757e4b59-9136-e162-06a2-1173a2d13c5a.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](https://qiita-image-store.s3.amazonaws.com/0/129712/91b08d10-a5f8-ba0d-4c6c-309482bde919.png)

### Flutter rows & columns (3 of 6)
https://youtu.be/U7Caol8JQL8
Google公式動画の第３回目
![Screen Shot 0030-07-06 at 13.16.23.png](https://qiita-image-store.s3.amazonaws.com/0/129712/e9b8262b-1325-c0f9-361e-ef7a279fa020.png)


### Flutter ステート管理
https://youtu.be/HLop7s2sJ7Q

![Screen Shot 0030-07-06 at 13.34.08.png](https://qiita-image-store.s3.amazonaws.com/0/129712/74019d49-03ed-51b6-96bc-fa57300321d1.png)

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

![Screen Shot 0030-07-06 at 13.47.42.png](https://qiita-image-store.s3.amazonaws.com/0/129712/09075787-643d-6b57-784f-92e31fa1cf39.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](https://qiita-image-store.s3.amazonaws.com/0/129712/1af30732-63fc-360b-8745-2c7611540437.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](https://qiita-image-store.s3.amazonaws.com/0/129712/359d146f-6e20-dd6b-4554-1027c517019c.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](https://qiita-image-store.s3.amazonaws.com/0/129712/f1f1e720-0b00-88ec-ebdf-a7987fbe07ca.png)


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

![AnimatedIcon.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/ad63110e-2d35-874f-dbef-ff75a939bd16.gif)

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

![demo (1).gif](https://qiita-image-store.s3.amazonaws.com/0/129712/cef2bfed-2907-4484-90e5-b0fc023e1c43.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](https://qiita-image-store.s3.amazonaws.com/0/129712/ac61450e-736e-36b8-9827-814a987add9e.gif)

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

![example.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/f52dd515-1557-8eed-c7bf-7026303cf9d6.gif)

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

![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/4cd60a0a-885d-cb44-fdc9-fba1efa07174.gif)