Flutterウィークリー #23

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

この記事は#23の日本語訳です
https://mailchi.mp/222f45036906/flutter-weekly-290417

`↑のタイトルが#22になっていまるが先週が#22だったのでtypoなはず`

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

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

![1_RiFPR6Y5fUkETKwyK8vTHg.png](https://qiita-image-store.s3.amazonaws.com/0/129712/2b671f0e-9814-5bf5-44fe-d84dc6c06413.png)

### Onboarding Exercise
https://medium.com/@xsokev/onboarding-exercise-a584ebd9f608
ヨガアプリの作り方。FlutterのUIをどのように組み立てるかを解説

![1_A1z1d1wVg3ctNCYXpGLYiA@2x.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/5384043b-b872-8ce2-f4bb-dd015be6c268.jpeg)

### Android開発者向け: Activity UIをFlutterで作る方法
https://blog.usejournal.com/flutter-for-android-developers-how-to-design-activity-ui-in-flutter-4bf7b0de1e48
Android開発者視点から見たFlutterのレイアウトの作り方を解説

![1_orjHpEJ7_cLxBpbJ5tKHag.png](https://qiita-image-store.s3.amazonaws.com/0/129712/df12c59a-70fd-0d0d-3db8-47529c0236d8.png)

### FlutterFlakes — Layout Widgets in Flutter [Part 1]
https://medium.com/flutterflakes/flutterflake-layout-widgets-in-flutter-part-1-c571355e835
Flutterでレイアウト組みする為の全てのウィジェットを解説

![1_zuC2iZVGMbhzHGtNUNXYkA.png](https://qiita-image-store.s3.amazonaws.com/0/129712/0f924af5-0d41-0659-3dfe-5478d3bd4c31.png)

### Flutterアプリのリファクタリング - Part 1
https://medium.com/@lucasmbraz/refactoring-a-legacy-flutter-app-part-1-f5d40521f830
Flutterのテストについて解説

![1_gPfZYLOXsYomE332DifeLw.png](https://qiita-image-store.s3.amazonaws.com/0/129712/467d6d2e-e589-b1fe-aa05-5c899477f3ff.png)

### Flutterアニメーションの基礎と組み合わせ
https://medium.com/@theshivamlko/flutter-basic-animation-and-combined-animation-13d8bb6916e8
Flutterのベーシックアニメーション（Translate,Scale,Rotate,Opacity）とその組み合わせ方を解説

![1_6dxOrtpwoXPUObML8ZA11g.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/12de0c41-7fa1-5fea-ba76-053506654b05.gif)

### Dartを使ってFlutter Studioを作った話
https://medium.com/@pmutisya/create-flutter-studio-using-dart-501f6577c1ca
なぜFlutter Studioを作ることになったのか。モチベーションや設計思想などを解説

![1_ShefkQSRXukpk90_jPER-A.png](https://qiita-image-store.s3.amazonaws.com/0/129712/9cbd6c25-05f1-afb6-daa7-7908f6fd4629.png)

### Flutterカスタムペイントチュートリアル
https://medium.com/@rjstech/flutter-custom-paint-tutorial-build-a-radial-progress-6f80483494df
カスタムペイントウィジェットを使ってラジアルプログレスを描画する方法を解説したチュートリアル

![1_Vxc2evdypfe5w3NnOG0Kbw.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/fe518d23-9b95-37f3-84a6-e80a6ade736d.gif)

### Flutterアプリを作って学んだ５つのこと
http://cogitas.net/5-lessons-learned-flutter/
Flutterアプリを開発する上で役立つ５つのティップスを紹介

### Flutterで作るプログレスボタン
https://medium.com/@ibhavikmakwana/make-progress-button-in-flutter-d4e2d27bd1d7
ボタン埋込み型のプログレスアニメーションの実装方法を紹介

![1_k5-E1qX7x4nk1bvnFtsDFQ.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/674f32fa-0029-e421-1431-94642da2e997.gif)

### テーマを変更する方法
https://proandroiddev.com/how-to-dynamically-change-the-theme-in-flutter-698bd022d0f0
実行中のアプリのテーマを簡単に変更する方法を紹介

![1_3bJPBzNscZ5T5TB1tfxhlA.png](https://qiita-image-store.s3.amazonaws.com/0/129712/c4da3bcf-ab62-08df-0a63-8430bff22e4e.png)

### Flutter — BoxDecorationチートシート
https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20
BoxDecorationの使い方を一歩踏み込んでまとめた情報。このウィジェットは思っていたよりもすごい豊富な機能を持ち合わせている

![1_coIJNA2IPue97FRDOWKjNg.jpeg](https://qiita-image-store.s3.amazonaws.com/0/129712/0778d5c0-7ae6-6c6c-fbb5-52c0bd42ce61.jpeg)

### Flutter向けウィジェットとJSONのテンプレート
https://medium.com/@alex.bunting314/widget-and-json-file-templates-for-flutter-94d8246172b8
Android Studio向けのFlutterアプリ開発を便利にするテンプレートの作り方を紹介

![1_eyH4wLOkXxIAqHYxenI3Hg.png](https://qiita-image-store.s3.amazonaws.com/0/129712/4a9b2f4e-dcc8-9f4c-b29d-8774ce3df368.png)

### バッテリーの状態を知ろう！
https://flutter.institute/tracking-your-battery/
Flutterアプリでバッテリーの状態を知るためのプラグインとその使い方を紹介

![battery_state.png](https://qiita-image-store.s3.amazonaws.com/0/129712/46c72f79-3a91-0b9f-6a14-140a6d9ede78.png)

### Flutterで作るTODOアプリ
https://medium.com/the-web-tub/making-a-todo-app-with-flutter-5c63dab88190
初心者向けの簡単なTODOアプリの作り方を解説

![1_mqN9VlClBMRDCZ1RPhQLCw.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/99639827-8981-ffb9-c8b4-d6efa91b0257.gif)

# ビデオ＆メディア

### Flutter でListViewを入れ子にする
https://youtu.be/1LGKZsff8bQ
入れ子にしたListViewの作り方を動画で紹介

<img width="292" alt="Screen Shot 0030-06-11 at 6.54.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/4852b3d1-dc3e-1807-16e8-bf7201d6c714.png">

### Flutterのスクローリング
https://speakerdeck.com/rock3r/bigger-on-the-inside-flutter-scrolling-explained?slide=1
Flutterのスクローリングについて詳細を説明したスライド

<img width="1163" alt="Screen Shot 0030-06-11 at 6.55.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/5d382c4e-1b32-467d-b196-d907019df41c.png">

### Dart言語を使った非同期処理の解説
https://youtu.be/kN7X_gWcuv0
Dart言語で非同期処理を行うためのチュートリアル

<img width="974" alt="Screen Shot 0030-06-11 at 6.57.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/fc68ccfe-0409-7c94-e500-a95e3e5da8e2.png">

### Flutter : ドロワーを使って複数ページを管理
https://youtu.be/GQVbUpmN9BE
ドロワーコンポーネントを使用してナビゲーションを作成する方法を解説する動画

<img width="428" alt="Screen Shot 0030-06-11 at 6.58.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/41928738-a53d-9b4b-9aac-5f95a429a645.png">

### Android Dialogs: Flutterのセットアップ
https://youtu.be/CevGw-VUh8w
Android Dialogs初のFlutterを学ぶための動画第一弾（全６回）

<img width="689" alt="Screen Shot 0030-06-11 at 6.59.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/ac7cf1ec-9702-18e9-27a3-031bd9fba018.png">

### Flutter レイアウト: PageView, ListView, GridView, Slivers, CustomScrollView
https://youtu.be/-zJ6CnOVndE
スクロールするウィジェットに関して説明した動画

<img width="685" alt="Screen Shot 0030-06-11 at 7.00.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/6c3eae36-7751-dd12-5ad9-c601177b2bfe.png">

# ライブラリ＆コード

### Flutterウィジェットのリスト
https://github.com/kishansinhparmar/Flutter-Basic-Widgets
Flutterアプリのウィジェットをいろいろと紹介

<img width="427" alt="Screen Shot 0030-06-11 at 5.58.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/79578e60-2d2b-c8ac-c01d-98fc8f6fe0ed.png">

### flutter_downloader
https://github.com/hnvn/flutter_downloader
ファイルのダウンロードをハンドリングしてくれるプラグイン

<img width="748" alt="enable_background_mode.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/e840c647-8e6b-9419-ba4f-7a747d0044bd.png">

### Media Queue
https://github.com/zwhitten/media_queue
TODOアプリ風のアプリデモ

![MediaQueue.png](https://qiita-image-store.s3.amazonaws.com/0/129712/5daba0b9-cdcc-e3c8-be11-31f8e66c67e5.png)

### Flutter クライアントと PHP バックエンド
https://github.com/harsh159357/flutter_client_php_backend
FlutterアプリとPHPで書かれたバックエンドのサンプルコード

<img width="784" alt="Screen Shot 0030-06-11 at 5.59.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/219407e7-6e70-ed55-89d4-8681f407431e.png">

### Fluttergram
https://github.com/mdanics/fluttergram
FirebaseとFirestoreを使ったインスタグラムのクローンアプリ

<img width="705" alt="Screen Shot 0030-06-11 at 6.00.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/666c09ef-e2a4-fe3e-7db2-38eff776f24f.png">