Flutterウィークリー #22

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

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

# アナウンス
 
### Flutter新開発ツール - Android Studio and IntelliJ pluginsのアップデート
https://groups.google.com/forum/?linkId=52478434#!topic/flutter-dev/FTUXoZ7rSHc
Nilay YenerがFlutterツールの新バージョンをアナウンスしました

<img width="792" alt="Screen Shot 2018-06-01 at 12.13.21 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/0e7c35a2-d164-8147-e1b5-c1025141b681.png">

### DartCode v.2.13
https://dartcode.org/releases/v2-13/
Visual Studio Code向けのDartプラグインの新バージョンも発表

<img width="700" alt="emulator_list.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/9abcda16-e422-1059-694c-038856ca90e2.png">

# 読み物＆チュートリアル
 
### Flutterで作るリアクティブモバイルアプリケーション
https://medium.com/flutter-io/build-reactive-mobile-apps-in-flutter-companion-article-13950959e381
Google I/Oでの発表のあとにFilip Hracekが書いたコンセプトと詳細とフルサンプルコードをまとめた記事

![Build reactive mobile apps in Flutter — companion article](https://qiita-image-store.s3.amazonaws.com/0/129712/eb0a2938-58e4-38c8-8d8d-0298e61a741d.gif)

### Flutterラッパー — 特定のFlutterバージョンをプロジェクトに紐付ける手順
https://medium.com/grandcentrix/flutter-wrapper-bind-your-project-to-an-explicit-flutter-release-4062cfe6dcaf
Flutterプロジェクトに特定のFlutterバージョンを割り当てるGradleを使用した方法を紹介。大きなチームや異なるプロジェクトを管理する必要がある場合に便利

![Flutter wrapper — bind your project to an explicit flutter release](https://qiita-image-store.s3.amazonaws.com/0/129712/76816db4-7aba-a42b-e864-556a2d4f30b9.png)


### Flutter — navigating off the charts
https://medium.com/@swav.kulinski/flutter-navigating-off-the-charts-e118562a36a5
Flutterのナビゲーションを司るRoutesの解説

![1_bJybEmfRBvdDd4n7FFazzA.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/2cde69d2-5889-d7c0-1927-da86add3c904.jpeg)


### 一瞬で広告を実装する方法を紹介
https://medium.com/@greg.perry/ads-in-a-snap-flutter-example-4362a2c88c0b
Flutterアプリに簡単に広告を表示する為のチュートリアル

![Ads in your App in a Snap](https://qiita-image-store.s3.amazonaws.com/0/129712/723d7e78-2eb9-9a05-4837-eb45987a4281.png)

### どうやってFlutterを勉強した?
https://www.quora.com/How-did-you-learn-Google-Flutter/answer/Rohan-Taneja-1?srid=iB1S
Flutterを学ぶために役立つサイトのリストを紹介

### Flutter サイドメニュー
http://tphangout.com/flutter-side-menu/
Flutterでサイドメニューを簡単に実装するチュートリアル

![Flutter サイドメニュー](https://qiita-image-store.s3.amazonaws.com/0/129712/5bd1179f-e2a0-ec51-29ad-48cb45e94281.png)

### Flutter: AnimatedSizeクラス
https://medium.com/@ibhavikmakwana/flutter-working-with-animatedsize-35253ff8f16a
FlutterでAnimatedSizeクラスを使うための説明

![Flutter: Working with AnimatedSize](https://qiita-image-store.s3.amazonaws.com/0/129712/df1c9c55-dba0-7700-8f5c-46fa0c200d17.gif)

### GitHub Flutterの作り方 — Part 1: Trending Repositories List
https://medium.com/@alfianlosari/building-github-flutter-app-part-1-trending-repositories-list-f48683ac9bef
GitHubクライアントアプリをFlutterで作るためのステップバイステップチュートリアル

![Building GitHub Flutter App — Part 1: Trending Repositories List](https://qiita-image-store.s3.amazonaws.com/0/129712/c470be2a-3bfb-1c5b-0299-21d9fc3812a3.png)


### 多言語対応 Flutter アプリ (アラビア語のようなRTL言語)
https://medium.com/@Carbon187/internationalization-flutter-app-arabic-rtl-fe99bfae696e
アラビア語のように右から読むような言語に対応する為の多言語対応

![Internationalization Flutter app (Arabic RTL)](https://qiita-image-store.s3.amazonaws.com/0/129712/4f36200d-5072-0ae4-3894-8ace5671d42e.gif)

### なぜFlutterがモバイル開発におけるゲームチェンジャーになるのか
https://proandroiddev.com/why-flutter-will-change-mobile-development-for-the-best-c249f71fa63c
Aaron OertelがFlutterを試してみた感じたことなどをまとめた記事

![Why Flutter Will Change Mobile Development for the Best](https://qiita-image-store.s3.amazonaws.com/0/129712/12960f51-46d7-853f-81e0-5d1cebe6872b.png)


### Reduxで大規模Flutterアプリ開発
https://hillelcoren.com/2018/06/01/building-a-large-flutter-app-with-redux/
Reduxを使った大規模なFlutterアプリ開発について語った記事

![mobile_app-1.png](https://qiita-image-store.s3.amazonaws.com/0/129712/f91fcccf-784f-8650-f98e-b0a859c71900.png)


# ビデオ＆メディア
 
### Flutter チャレンジ: カードフリップカルーセル
https://youtu.be/sWkysCKh2uY
カードフリップカルーセルの作り方

<img width="841" alt="Flutter Challenge: Card Flip Carousel" src="https://qiita-image-store.s3.amazonaws.com/0/129712/d0eb35de-0fe9-c6d5-9fa7-ef3d0de6fa60.png">

### マテリアルデザインをFlutterに使う
https://youtu.be/DL0Ix1lnC4w
Google Developersチャンネルの新動画。 Flutterアプリにマテリアルデザインを適用する手順

<img width="678" alt="Using Material Design with Flutter" src="https://qiita-image-store.s3.amazonaws.com/0/129712/3f3b4a96-dc86-9f78-89c9-6b79448808ab.png">

### クパチーノライブラリを使用してiOSテーマウィジェットをFlutterアプリに追加
https://youtu.be/Ycl24PMxJu8
Tensorの今週の動画。クパチーノウィジェットの使い方


<img width="501" alt="Screen Shot 0030-06-04 at 1.01.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/0b3f364c-ce66-e9e8-90c8-4c9793f6083b.png">


### APIで取得したJSONデータを適用したアプリをつくる手順
https://youtu.be/VJbWM-Gg-Rk
JSON情報をスクリーンに表示する為の手順を紹介したチュートリアル

 <img width="934" alt="Screen Shot 0030-06-04 at 1.03.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/0f6e29ec-dbd2-d7ea-0b6f-83d5d8025327.png">

# ライブラリ＆コード
 
### Flutter FAB
https://github.com/JanhaviDahihande/Flutter_FAB
アニメーションFABを実装するサンプルコード

![Fab_Demo.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/b96a4427-222f-6b34-d06b-9b50c08bfda7.gif)

### Loader SearchBar
https://github.com/tomwyr/loader-search-bar
AppBarに検索バーを実装する方法

![68747470733a2f2f7468756d62732e6766796361742e636f6d2f4865616c746879416d626974696f7573496d70616c612d6d61782d31346d622e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/b7f5fd49-ccfb-254d-2cb1-ef8b2dc53e84.gif)


### flutter_stream_friends
https://github.com/brianegan/flutter_stream_friends
Dart Streamsは素晴らしい！Flutterも素晴らしい！まとめて使うといいことがあるかも

### スプラッシュスクリーンアニメーション
https://github.com/ibhavikmakwana/SplashAnimations
複数の異なるトィーンアニメーションを結合するサンプル

![スプラッシュスクリーンアニメーション](https://qiita-image-store.s3.amazonaws.com/0/129712/12da5997-f027-1595-923a-c73a8e6a259a.gif)

### Pawdoption
https://github.com/SpokenBanana/pawdoption
ペットの養子縁組アプリ

![Pawdoption](https://qiita-image-store.s3.amazonaws.com/0/129712/94c75378-7b5c-17bc-3a92-967e6f379726.png)

### rxdart_flutter_hello_world
https://github.com/zarinfam/rxdart_flutter_hello_world
RxDartを使ったFlutterアプリ