Flutterウィークリー #24

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

この記事は#24の日本語訳です
https://mailchi.mp/cf09a675ce57/flutter-weekly-298361
 
# アナウンス
 
### VS Dart エクステンション v.2.14.0
https://dartcode.org/releases/v2-14/
Visual Studio Code向けDartエクステンションの最新リリース。アウトラインプレビュー他多数の追加機能

<img width="490" alt="outline_view.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/5fec9eee-942d-ab08-496f-011491541bae.png">

 
# 読み物＆チュートリアル
 
### FlutterのRowsとColumnsウィジェット
https://medium.com/@poojabhaumik/breaking-layouts-in-rows-and-columns-in-flutter-8ea1ce4c1316
RowウィジェットとColumnウィジェットを使っていくつかのレイアウトを組む方法を解説

![1_1WJH0jVJcC6uY7IpT449XA.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/e90f886a-a0d9-e2cb-aee3-01d791e9b5c5.jpeg)

### Preferenceへの保存と読み込み
https://medium.com/@greg.perry/store-and-read-your-apps-preferences-4139e836cfe9
プリファレンスプラグインの使い方について解説した記事

![1_NVdI5yZ9LLAdvaQRFXtKpw.png](https://qiita-image-store.s3.amazonaws.com/0/129712/84fb0b2f-3710-88d5-c7d3-b9e0fcf9b49b.png)

### Flutterを使う上で知っておくべきDart言語
https://medium.com/@sarusethi987654321/just-enough-dart-for-flutter-e907b80f4ff4
Flutterを始める上で知っておくべきDart言語に関する最小限のチュートリアル

![1_vBbWCTwdkSVnno3rVujrwQ.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/8cc388d0-f225-2b4c-020d-582b3d8b8398.jpeg)

### Flutterでレストランアニメーション
https://medium.com/@duytq94/restaurant-animation-with-flutter-cbe704b4e20f
アニメーションをふんだんに使ったレストランアプリの作り方について解説

![1_fPw3Y6El5l5yi2EhRs5iUw.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/9be3e3d6-2c4e-53f0-3367-94dbb4b010f4.gif)

### Flutterで実装するボトムバー
https://flutterdoc.com/bottom-sheets-in-flutter-ec05c90453e7
Flutterでどのようにしてボトムシートを実装するかを解説した記事

![1_0yFbm2vwVdEzc91tJ0r2jw.png](https://qiita-image-store.s3.amazonaws.com/0/129712/c31aae8d-4739-32d9-a261-49a9939d9d5f.png)

### SQFLiteプラグイン
https://medium.com/@mohamedraja_77/sqflite-database-in-flutter-c0b7be83bcd2
FlutterでSQFLiteを使う上での手順をサンプルと共に解説。FlutterでSQLiteを使うならこれ

![1_mzVEnTuVTM-i7RG4GVQVrg.png](https://qiita-image-store.s3.amazonaws.com/0/129712/1a14706b-1790-c2dc-4463-e6f8d0e511fe.png)

### 既存のAndroidアプリにFlutterを組み込む
https://medium.com/@pargearnold/embedding-flutter-in-existing-android-project-733dccacde12
既存のAndroidアプリからFlutterのActivityを起動する方法を解説

![1_Yl2bwXPU5wTL9F65k2jH3g.png](https://qiita-image-store.s3.amazonaws.com/0/129712/af3512e0-8b13-e2e8-7608-53bd1907a4bb.png)

### Flutterで作るスケーラブルアプリ
https://hackernoon.com/scalable-app-structure-in-flutter-dad61a4bc389
Flutterでどのようにしてスケーラビリティを確保した設計にするのかを著者の経験からまとめた記事

### FlutterとML Kitで作るテキスト＆バーコードスキャナー
https://medium.com/@alfianlosari/flutter-text-barcode-scanner-app-with-firebase-ml-kit-103db6b6dad7
Firebase ML KitとFlutterを使ってテキストスキャナー、バーコードスキャナーを作るチュートリアル

![1_WR1BNNLwfrfbEngoQyShiQ.png](https://qiita-image-store.s3.amazonaws.com/0/129712/0171b757-3523-6103-5a7a-df03f2d2bc81.png)

### PixelbookでFlutterアプリの開発をする
https://medium.com/@timsneath/flutter-development-on-a-pixelbook-dde984a3fc1e
PixelbookでFlutterアプリ開発を行うための設定手順をFlutterチームのTim Sneathが紹介

![1_lPjoYW_y910QuowYg_d-FA.png](https://qiita-image-store.s3.amazonaws.com/0/129712/c59ab2d7-8657-b9b9-bd00-e571e6857506.png)

### Flutter: Drawerの作り方
https://proandroiddev.com/flutter-creating-drawers-e31414f7d71a
Flutterでドロワーメニューを実装するチュートリアル

![1_MMaAY4S4Bjs-t7sqhTe-jQ.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/3eba4aa5-b2a1-5f52-4493-4ac2478d6358.gif)

### Flutter: タブを使った複数画面における入力フォーム
https://hillelcoren.com/2018/06/12/flutter-complex-forms-with-multiple-tabs-and-relationships/
入力フォームアプリを作るためのテクニックをいくつか紹介

![screenshot_1528817346.png](https://qiita-image-store.s3.amazonaws.com/0/129712/444d58ac-fa78-388f-4233-c6fdb0a60a57.png)

### FlutterでどうやってJSONデータを読み込む？
https://medium.com/@nitishk72/how-to-load-json-data-in-flutter-204c7bb1873c
Flutterを使って非同期でJSONデータを読み込むチュートリアルとその動画

![1__rk9uV7e7T_rKwpFoQDYQQ.png](https://qiita-image-store.s3.amazonaws.com/0/129712/3b680cef-e167-7041-93c9-94c8f3c8f0d0.png)

### Flutterアプリを書くことがどういうことか
https://medium.com/@seenickcode/what-it-was-like-to-write-a-full-blown-flutter-app-330d8202825b
iOSアプリからFlutterへのポーティング、Googleチームに言いたいことなどが書いてある記事

### FlutterとCJKフォントについて
https://medium.com/@najeira/flutter-and-cjk-font-selection-2-2ba06e32dd8d
Flutter v0.5.4におけるCJKフォント（中国語、日本語、韓国語）の扱いについてまとめた記事

![1_RSfUa2JJ98dyhZHZDK8xmA.png](https://qiita-image-store.s3.amazonaws.com/0/129712/c87fe544-3840-70f8-1eaf-1abacba488ad.png)

 
# ビデオ＆メディア
 
### Flutter: Cloud Functionsを使ってリアルタイムDBに変更があった時にPush通知
https://youtu.be/9PBAZkNe6FY
FlutterでどのようにしてPush通知を利用するかを解説する動画

<img width="1038" alt="Screen Shot 0030-06-17 at 23.23.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/3eebec6c-a6c1-171c-8910-b7cc189df915.png">

### Android Dialogs. Flutter ウィジェット (2/6)
https://youtu.be/hjcmBmocRAU
今回ははじめてのウィジェットを作ってみます

<img width="1035" alt="Screen Shot 0030-06-17 at 23.21.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/dd6478a2-9625-ac24-8bae-195e4810550f.png">

### Flutter チャレンジ: Tinder Matching
https://youtu.be/NMHhzd5ewP4
Tinder UIをFlutterで実装する為のチュートリアル

<img width="201" alt="Screen Shot 0030-06-17 at 23.11.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/fc9286d9-88e8-59f6-a479-c6fdb41a8252.png">

 
# ライブラリ＆コード
 
### flutter_swiper
https://github.com/jzoom/flutter_swiper
Swipeでページを切り替えることが出来るプラグイン。縦方向の動きにも対応

![5.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/f50ac926-5964-b409-b9b8-1eee9b7b94cd.gif)

### photo_view
https://github.com/renancaraujo/photo_view
拡縮も出来る画像ビューワー

<img width="423" alt="Screen Shot 0030-06-17 at 23.03.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/c9feac38-3d59-6aa4-84f0-0761864546cd.png">

### flutter_sticky_header
https://github.com/letsar/flutter_sticky_header
Sliverを使ったスティッキーヘッダーの実装

![sticky_header_all.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/8399ce2a-7d1f-5ebe-4b49-bd560389cad7.gif)

### Beer Me Up
https://github.com/benoitletondor/Beer-Me-Up
Flutterで開発された飲んだビールを記憶しておくことが出来るアプリ

<img width="977" alt="Screen Shot 0030-06-17 at 22.58.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/23c1277b-eaa5-7068-b5c8-7f2d64a20117.png">