Flutterウィークリー #11

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

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

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

### React NativeアプリをFlutterで再開発
https://blog.geekyants.com/we-rebuilt-a-react-native-app-with-flutter-4160f0499a82
React Nativeでアプリを作るのとFlutterで作る場合の比較

![Screen Shot 0030-06-20 at 16.02.44.png](https://qiita-image-store.s3.amazonaws.com/0/129712/a9c70af8-8c03-dfe5-44e6-5ea54b0ba286.png)

### アニメーションを組み合わせる
https://flutter.rocks/2018/03/14/orchestrating-multiple-animations-into-visual-enter-animation/
アニメーションを組み合わせてカッコイイ画面を設計する

![result.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/ab817af9-fdff-f333-0fdf-db575a5c0e61.gif)

### Flutter: 本棚アプリ Part 2, メモ機能とDB
https://proandroiddev.com/flutter-bookshelf-app-part-2-personal-notes-and-database-integration-a3b47a84c57
データベース昨日を実装しアプリにメモを残すことが出来るようにする

![1_5pimSZUB484hM6dzuK6gXQ.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/46a707fa-0a7e-4938-2a0e-3c8cc02e7737.gif)

### FlutterでSnackbarを表示
http://cogitas.net/show-snackbar-flutter/
FlutterでSnackbarを使う農法を解説

![2018_02_24_10_41_55.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/b019d103-255a-14da-79c6-ad509f50fb1c.gif)

### はじめてのFlutter
https://www.raywenderlich.com/188257/getting-started-with-flutter
Flutterをゼロから始めるためのチュートリアル

![finalapp-571x500.png](https://qiita-image-store.s3.amazonaws.com/0/129712/a4f450a2-4522-3cdd-c0ee-8c3fc62130f2.png)

### FlutterでStoryboarding Widgets
https://medium.com/@ilikerobots/storyboarding-widgets-in-flutter-96d79d9a72f0
WebのUI開発で便利な仕組みをFlutter開発に適用する

![1_Srb2BPWbMCDXvNsisaMDUA.png](https://qiita-image-store.s3.amazonaws.com/0/129712/41f4562f-681c-bc08-1612-76faaeac1c5e.png)

### Flutter: Routes と Navigation
https://medium.com/@Nash_905/flutter-routes-and-navigation-69f128a9ea8f
Flutterのルートとナビゲーションに関する素晴らしいチュートリアル

![0_qlwJ-ibAAJ3nq0cV.png](https://qiita-image-store.s3.amazonaws.com/0/129712/25107e53-a677-bef0-5c2a-b04d23efb068.png)

### DIでUIとロジックを分ける
https://medium.com/@matejthetree/separate-ui-and-logic-in-a-simple-way-with-dependency-injection-organic-injector-3308242e481d
organic_injectorを使ってFlutterにDIを実装

<img width="375" alt="1_0gHe79bGPMD-Z7HZgCI4gQ.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/74837113-fd49-2497-81b1-5f821f256154.png">

### FlutterでComboBoxes
https://medium.com/@boldijar.paul/comboboxes-in-flutter-cabc9178cc95
FlutterでComboBoxesを実装する手順を解説

![1_pwx_TK9rkfy52J_PSDdmYQ.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/d0161742-b99d-951b-7d1a-a348111623eb.gif)

### Flutterのホットリロードやばい！
https://medium.com/flutter-io/that-flutters-reload-is-so-hot-right-now-371b3ad0fc94
Flutterのホットリロードは本当に便利すぎてやばいってことが書いてある記事

![1_7BKoEbJbiH08LxyMIpQdew.png](https://qiita-image-store.s3.amazonaws.com/0/129712/92ff6134-c4e8-06ec-1b47-1f5fc3e4fb0c.png)

### The Flutter Redux Problem
https://medium.com/fluttery/the-flutter-redux-problem-fa9d59ec97b8
FlutterでRedux実装をする場合の問題点

![1_ZX00M-DmsrigKap7wzGoQQ.png](https://qiita-image-store.s3.amazonaws.com/0/129712/f9a453d0-85a6-5bfa-4a2f-c5fd08fe9d32.png)

### 実際にFlutterを触ってみよう！
https://medium.com/@max1ermakov/getting-your-hands-dirty-with-flutter-project-setup-authorization-ad4c7ab9cd89
プロジェクトの設定から認証までを実装してみる

![Screen Shot 0030-06-20 at 16.06.55.png](https://qiita-image-store.s3.amazonaws.com/0/129712/53d55ce9-f1f0-eaf0-ec46-ba4cacda51b5.png)

# ライブラリ＆コード

### flutter_simple_arch
https://github.com/netdur/flutter_simple_arch
３つの簡単なステート管理サンプル

### flutter-mvp
https://github.com/n1x0nj4/flutter-mvp
FlutterでMVPアーキテクチャを実装するサンプル

### flutter-examples
https://github.com/nisrulz/flutter-examples
Flutterのコードサンプルを集めてみた

![Screen Shot 0030-06-20 at 16.07.49.png](https://qiita-image-store.s3.amazonaws.com/0/129712/32d4eb48-f8b6-3b3c-e31b-3f48543f12b6.png)

### flutter_sparkline
https://github.com/xqwzts/flutter_sparkline
グラフを簡単に描画できるライブラリ

![example_points_all.png](https://qiita-image-store.s3.amazonaws.com/0/129712/9b9e902b-79f8-638d-7669-43da85312b91.png)

### flutter_parallax
https://github.com/letsar/flutter_parallax
スクロールに合わせて画像が移動するライブラリ

![parallax.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/613a003f-304b-2aa2-ed02-0f5ca56fae8a.gif)

# ビデオ＆メディア

### Google公式Flutterチュートリアル
https://www.youtube.com/playlist?list=PLR2qQy0Zxs_UdqAcaipPR3CG1Ly57UlhV
Google公式のFlutterチュートリアル

![Screen Shot 0030-06-20 at 16.09.11.png](https://qiita-image-store.s3.amazonaws.com/0/129712/9e6c1f9d-dbfa-c0d3-dadd-9c7a7b7b9967.png)

### Scale16xでFlutterの紹介
https://youtu.be/O7TXamVRSbY
Scale16xというオープンソースカンファレンスでFlutterについて紹介した動画

![Screen Shot 0030-06-20 at 16.11.14.png](https://qiita-image-store.s3.amazonaws.com/0/129712/aeb39747-9a3a-e9eb-175f-c5fc786f83e0.png)

### Flutter - Getting data from Firebase
https://youtu.be/Bper2K92bd8
FlutterでFirebaseから情報を読み込む為のチュートリアル

![Screen Shot 0030-06-20 at 16.10.11.png](https://qiita-image-store.s3.amazonaws.com/0/129712/05e68e6a-33c3-f936-3ba7-867753ca78ce.png)

### Flutterで作るドラッグアンドドロップアプリ
https://youtu.be/On2Oew0NdGo
Flutterアプリ内でドラッグアンドドロップを実装するチュートリアル

![Screen Shot 0030-06-20 at 16.10.47.png](https://qiita-image-store.s3.amazonaws.com/0/129712/89780551-38ae-6b0c-d939-a9515bec47a1.png)