Flutterウィークリー #28

# Flutterウィークリーとは？
FlutterファンによるFlutterファンのためのニュースレター
https://flutterweekly.net/

この記事は#28の日本語訳です
https://mailchi.mp/flutterweekly/flutter-weekly-28

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

### Flutterで作られたアプリのリスト
https://itsallwidgets.com/
Flutterで作られたアプリを紹介しているサイト。Flutterでアプリを作っている人はここに登録しよう！

<img width="359" alt="Screen Shot 0030-07-23 at 0.00.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/2431bfaa-671c-c05e-0a99-34b3edc5650d.png">

### Native, Flutter, ReactNativeのパフォーマンスを比較
https://robots.thoughtbot.com/examining-performance-differences-between-native-flutter-and-react-native-mobile-development-take-two

<img width="723" alt="Screen Shot 0030-07-23 at 0.08.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/10f57aba-c562-af79-d451-2bc2597c50f8.png">

### Zefyr公開: Flutter用リッチテキストエディタウィジェット
https://medium.com/@pulyaevskiy/announcing-zefyr-a-soft-and-gentle-rich-text-editor-for-flutter-1c7c208bdf71
ZefyrというFlutter用リッチテキストエディタウィジェットのプレビューリリース

![1_0-YCCNnhCH6EpCfYdRQkwA.png](https://qiita-image-store.s3.amazonaws.com/0/129712/cc119232-3b4f-dd42-68e2-74aafd5d2aa7.png)

### Flutter, Dialogflow, GCPを使ってショッピングチャットボットを作る
https://medium.com/@alfianlosari/chatbot-inventory-tracking-ios-android-app-with-flutter-dialogflow-and-gcp-d7d903ce7f90

![1_1xlKfMZ0lHIa08_wLiLaWw@2x.png](https://qiita-image-store.s3.amazonaws.com/0/129712/56b3b158-4bb6-b4c8-5b22-dfc4d2e8fc0a.png)

### FlutterのGestures
https://medium.com/flutter-community/flutter-deep-dive-gestures-c16203b3434f
Flutterでジェスチャー認識をハンドリングする方法を解説

### Dart Streamsを使ってFlutterでMVVM
https://medium.com/@quickbirdstudio/app-architecture-mvvm-in-flutter-using-dart-streams-26f6bd6ae4b6

![1_A87nt_oqnajSSejzJHGY5w.png](https://qiita-image-store.s3.amazonaws.com/0/129712/03e27ae5-51da-b1e5-2d2e-8307142a17cc.png)

### FlutterとAndroidの難読化
https://medium.com/@swav.kulinski/flutter-and-android-obfuscation-8768ac544421
Android×FlutterでProguardを利用する方法を解説

### アニメーション背景パッケージ
https://medium.com/@andrebaltazar/animated-backgrounds-in-flutter-2650347d6ee7

![1_zjB3PtZF_20VDk6LNsqQcQ.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/9503c54f-aeec-4c10-c66a-54cdd2d4d75a.gif)

### Flutter チャレンジ: WhatsApp
https://medium.com/@dev.n/flutter-challenge-whatsapp-b4dcca52217b
WhatsAppインターフェースをFlutterで作る方法

![1_5n_vLiGTQ-RTWW-hdIT6XQ.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/07d38916-48af-b578-5ae2-b5c38a544e68.jpeg)

### Flutterで作るカスタムレビューページウィジェット
https://www.mindinventory.com/blog/create-review-page-custom-widgets-with-flutter/

![smile.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/ab1c5e0b-8b69-7a85-1127-43637c12fe59.gif)

### FlutterでiOSのアプリバンドル
https://medium.com/flutter-io/flutters-ios-application-bundle-6f56d4e88cf8

![1_xfvovQJT-5OsHBDBIQa92A.png](https://qiita-image-store.s3.amazonaws.com/0/129712/0fddaedb-ff49-2ebd-0988-7f548cd8906a.png)

### Flutter チャレンジ: TODO アプリ
https://medium.com/@dev.n/flutter-challenge-todo-app-concept-bd36107aa291

![1_P-XP1TXNil_LMxd24nMntw.png](https://qiita-image-store.s3.amazonaws.com/0/129712/39f6a43c-bb5b-1787-0665-82fd6b9ed8b5.png)

### FlutterでListViewのページネーション
https://crossingthestreams.io/2018/07/21/loading-paginated-data-with-list-views-in-flutter/

![ezgif-5-63c84bcd85.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/80bbdb84-c5ea-45dc-5a3f-b2751f5940d5.gif)

### Dart 2に向けてPubで公開しているパッケージも対応しよう!
https://medium.com/dartlang/getting-ready-for-dart-2-and-making-your-packages-look-great-on-the-pub-site-118464d7f59d
既存パッケージをDart2に対応させる方法を解説

### FlutterでBLoCパターンを使ってステート管理
https://itnext.io/state-management-using-bloc-pattern-in-flutter-390d4056006f
RxDartをつかってBLおCパターンをFlutterに実装する方法を解説

![1_RSvD_TVJlT67dOUwBXavqA.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/c740b005-a05e-6a4e-81a5-4e9f97bee8f2.jpeg)

### Flutterチャレンジ: Twitter
https://itnext.io/flutter-challenge-twitter-a1cb17f1e21b
A new challenge! this time recreating the Twitter interface, by Deven Joshi.
![1_DF1_9kc9NGzT9pd4CtyDjw.png](https://qiita-image-store.s3.amazonaws.com/0/129712/133ff345-914e-8e1a-e5b0-9e001eac86b6.png)


# ビデオ＆メディア

### FlutterのInheritedWidgetについて解説した動画
https://youtu.be/X8JDPt83c6M

<img width="1039" alt="Screen Shot 0030-07-23 at 15.26.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/ecb42777-f973-b57e-7751-3f0c5cc760c4.png">

### 技術的負債とStreams/BLoC - 退屈なFlutter開発ショー 4
https://youtu.be/fahC3ky_zW0

<img width="1037" alt="Screen Shot 0030-07-23 at 15.30.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/8a57e267-7099-83de-bc0c-d308f61c85b8.png">


# ライブラリ＆コード

### Zeplin Flutter Extension
https://extensions.zeplin.io/extension/5afc76c7cb3b9400120419b9
色やスタイルの定義クラスを生成

<img width="467" alt="Screen Shot 0030-07-23 at 15.34.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/4f9482df-9dd1-ae31-c7ca-8a6b75678dd8.png">

### flutter_slidable
https://github.com/letsar/flutter_slidable

![slidable_overview.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/5c4e0946-0acd-aabd-a5b5-2a0083de9179.gif)

### login_bloc
https://github.com/giovapanasiti/login_bloc
BLoCパターンを使ったサンプルログインアプリ

### Flutter NFC Reader
https://github.com/matteocrippa/flutter-nfc-reader
iOSとAndroid両方で動作するNFCタグを読むためのプラグイン

### Flutterでアプリのバッヂを扱う為のプラグイン
https://github.com/g123k/flutter_app_badger

![ios (1).png](https://qiita-image-store.s3.amazonaws.com/0/129712/c8c362ab-5246-1149-415f-ba10ea50b7e4.png)
![android (1).png](https://qiita-image-store.s3.amazonaws.com/0/129712/90970e7f-36dc-9ee7-95cb-c3210f0f1ecc.png)

### ReactiveFlutter
https://github.com/leocavalcante/reactive_flutter
RxDartとbuilt_valueを使ったReduxベースのステートマネージャー