Flutterウィークリー #57

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

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

※Google翻訳を使って自動翻訳を行っています。翻訳に問題がある箇所を発見しましたら編集リクエストを送っていただければ幸いです。





# アナウンス

### 国際Flutterハッカソン
https://flutterhackathon.com/

<img src="https://flutterhackathon.com/assets/images/share.jpg?v65298036517551" />
最初のInternational Flutter Hackathonはここにあります。 2019年6月1日土曜日には、世界中の他のFlutterファンの間で参加することができます。詳細については最寄りのGDGにお問い合わせください。


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

### Flutter 、通知は「バブルアップ」、値は「下がる」
https://medium.com/@develodroid/flutter-notifications-bubble-up-and-values-go-down-c1a499d22d5f

<img src="https://cdn-images-1.medium.com/max/1200/1*WAjLjS1dp32F8YP9Rkq6eg.jpeg" />
Chema Rubioは、通知と値を使用してウィジェットを通信する方法を検討します。


### カスタムコンポーネントを作成する
https://santoshanand.me/2019/05/04/create-custom-component/

<img src="http://yoursite.com/gallery/custom1.jpeg" />
Santosh Anandによるカスタムウィジェットの作成方法のサンプル


### FlutterとFirebaseによるリアルタイム統計モニタ
https://medium.com/flutter-community/real-time-stats-monitor-with-flutter-and-firebase-576cd554b9ca

<img src="https://cdn-images-1.medium.com/max/1200/1*X8hZD3GQIGmt5hb5c1tdaw.png" />
Dane Mackierが、 FlutterとFirebaseを使用してリアルタイムの統計モニターを作成する方法を説明します。ビデオが含まれています。


### Flutterアプリに音楽/オーディオを追加する方法
https://medium.com/flutter-community/how-to-add-music-audio-to-your-flutter-app-dcb6162c32d7

<img src="https://cdn-images-1.medium.com/max/1200/1*yKcCdc4J6hq3N0QHgHLkFA.jpeg" />
Mark O&#39;Sullivanは、 Flutterアプリから音楽やオーディオを処理するときに直面した課題と、それらをどのように解決したかについて説明します。


### ＃3 Flutter Dartコツ
https://medium.com/flutter-community/3-flutter-dart-tips-18cc8502f451

<img src="https://cdn-images-1.medium.com/max/1200/1*PYuqzYt6TaxaYH0-R7IpUg.png" />
Bhavik Makwanaからのより役に立つヒント。


### Flutter ：コード構成
https://medium.com/flutter-community/flutter-code-organization-de3a4c219149

<img src="https://cdn-images-1.medium.com/max/1200/1*5SZWc58dNh8b5MJn2KJoLA.png" />
Conner Aldrichが、 Flutterアプリでコードを配布して整理する方法について説明します。


### FutureBuilderをデコードする
https://medium.com/flutter-community/decode-futurebuilder-bc1a5e6507d4

<img src="https://cdn-images-1.medium.com/max/1200/1*OpAHSdQ8KKyxW9twyPqY3Q.png" />
Greg PerryによるFlutterのFutureBuilderウィジェットの詳細な考察。


### SquareとNodeJSによるFlutter決済
https://medium.com/@samarthagarwal_43146/payments-in-flutter-with-square-and-nodejs-7b6710333b75

<img src="https://cdn-images-1.medium.com/max/1200/1*1qdb6Lc5U3QRY_ajXUoclA.png" />
Samarth AgarwalによるFlutter Squareの使用方法に関する詳細なチュートリアル。


### Flutterウィジェットテスト：実用的な例
https://cogitas.net/flutter-widget-tests-practical-example/

<img src="http://cogitas.net/blog/wp-content/uploads/2019/05/widget_tests.gif" />
Natalie Masse Hooperが、 Flutter Widgetテストがどのように機能するかを詳しく説明します。


### Flutterテストにおける非同期について
https://medium.com/flutter-io/understanding-async-in-flutter-tests-a304a7604b3c?linkId=66897059

<img src="https://cdn-images-1.medium.com/fit/c/64/64/1*5-aoK8IBmXve5whBQM90GA.png" />
Anthony Bullardによるこの記事で、テストでasyncをプロのように使用する方法を学んでください。


### Flutterフォトビュー＆ギャラリー - サイズ変更＆回転+画像カルーセル
https://resocoder.com/2019/05/04/flutter-photo-view-gallery-resize-rotate-image-carousel/

<img src="https://i0.wp.com/resocoder.com/wp-content/uploads/2019/05/thumbnail_2.png?fit=1200%2C675&ssl=1" />
MatejRešetárがPhoto Viewライブラリを使って高度なギャラリーとカルーセルを作成する方法を説明します。ビデオチュートリアルが含まれています。


### Flutter / dartでメモ作成アプリを作成する
https://medium.com/aubergine-solutions/creating-a-note-taking-app-in-flutter-dart-f50852993cd0

<img src="https://cdn-images-1.medium.com/max/1200/1*0dQNpR0DrpaZfMM8mXsvig.png" />
Flutter完全なメモ作成アプリケーションを作成する方法に関するJay Naikによるチュートリアル。


### Flutterパート1
https://medium.com/flutterdevs/bloc-pattern-in-flutter-part-1-flutterdevs-128f90059f5c

<img src="https://cdn-images-1.medium.com/max/1200/1*sIE7CtxTXtrZYyMVuUfE4w.png" />
BLoCとは何か、およびAditya Syalによる他のアーキテクチャとの比較についての説明。


### Flutter iOSの視点から- inovex-ブログ
https://www.inovex.de/blog/flutter-from-an-ios-perspective/

<img src="https://www.inovex.de/blog/wp-content/uploads/2019/04/flutter-ios.png" />
BjörnMichael Solvan Theilmannが、 Flutter iOSアプリを作成するための手順を詳しく説明しています。


### PageViewでの視差効果 -  UIチケットチャレンジ
https://marcinszalek.pl/flutter/tickets-challenge-parallax/

<img src="https://marcinszalek.pl/wp-content/uploads/2019/04/Tickets-parallax.png" />
MarcinSzałekによる視差を持つページビューの作成に関するクールなチュートリアルです。


# ビデオ＆メディア

### GRAPHQLサーバへのFlutterクエリ
https://www.youtube.com/watch?v=Re7FPa3wzN0&feature=youtu.be

<img src="https://i.ytimg.com/vi/Re7FPa3wzN0/hqdefault.jpg" />
このビデオでは、 Flutterアプリケーションを使ってGraphQLクライアントを設定し、サーバーにクエリを送信する方法を説明します。


### Flutter Tutorial  -  Firestoreを使ったFlutter DropdownButton
https://www.youtube.com/watch?v=pAn3-cqJ9MM

<img src="https://i.ytimg.com/vi/pAn3-cqJ9MM/maxresdefault.jpg" />
Firestoreからの動的値を使用してFlutterアプリケーションにドロップダウンを実装する方法に関するチュートリアル。


### 日付と時刻の選択 - Flutter
https://www.youtube.com/watch?v=lEHMloCMMsw

<img src="https://i.ytimg.com/vi/lEHMloCMMsw/maxresdefault.jpg" />
Flutterでの日付と時刻の選択の使い方


### AndroidおよびiOS用のFlutter SDKを使用したレスポンシブUI
https://www.youtube.com/watch?v=1sQotZtJQQk&feature=youtu.be

<img src="https://i.ytimg.com/vi/1sQotZtJQQk/maxresdefault.jpg" />
Flutter SDKを使用してレスポンシブUIを作成する方法を紹介する実用的な例。


### Flutterアプリをテストする - あなたのコードが正しく機能することを確認する（The Boring Flutter Development Show、Ep。21）
https://www.youtube.com/watch?v=bj-oMYyLZEY&list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl&index=31&linkId=66893072

<img src="https://i.ytimg.com/vi/bj-oMYyLZEY/maxresdefault.jpg" />
ボーリングショーのこのエピソードでは、FilipとゲストのAnthonyがFlutterアプリを公開する前にテストする方法と、さまざまな種類の自動テスト（ユニット、ウィジェット、統合）について説明します。


### 2歳児のためのFlutterドラッグ＆ドロップ
https://www.youtube.com/watch?v=KOh6CkX-d6U&feature=youtu.be

<img src="https://i.ytimg.com/vi/KOh6CkX-d6U/maxresdefault.jpg" />
簡単な色合わせの子供向けゲームの形でドラッグ＆ドロップUIを構築する


### Flutter UI  - ミニマルデザイン - スターバックス
https://www.youtube.com/watch?v=pesqXyep05Y&feature=youtu.be

<img src="https://i.ytimg.com/vi/pesqXyep05Y/maxresdefault.jpg" />
このビデオでは、Starbucksアプリケーション用のUIを作成する方法を説明します。


### Flutter ：5分で共有設定データ持続性
https://www.youtube.com/watch?v=uyz0HrGUamc&feature=youtu.be

<img src="https://i.ytimg.com/vi/uyz0HrGUamc/maxresdefault.jpg" />
Flutter共有設定を使用する方法を学びます。


### iOS用Flutter ARKitチュートリアル
https://www.youtube.com/watch?v=aHgzAfwxMQk&feature=youtu.be

<img src="https://i.ytimg.com/vi/aHgzAfwxMQk/maxresdefault.jpg" />
このビデオはARKitのような新しい可能性を説明しています。 ARKitはAppleによって作られた拡張現実感のためのライブラリです。


### ドラッグ可能（今週のFlutterウィジェット）
https://www.youtube.com/watch?v=QzA4c4QHZCY&feature=share

<img src="https://i.ytimg.com/vi/QzA4c4QHZCY/maxresdefault.jpg" />
ドラッグ可能を使用してウィジェットを移動したりドラッグしたりします。これを使用して、Eメール内のEメールアドレスまたは文書を新しいフォルダーに交換するためのUIを構築できます。


### ShadyBoukhary / flutter_clean_architecture
https://github.com/ShadyBoukhary/flutter_clean_architecture

Uncle BobのClean ArchitectureをFlutterに実装するのを簡単かつ直感的にするFlutterパッケージ。


# ライブラリ＆コード

### RafaelBarbosatec / tutorial_coach_mark
https://github.com/RafaelBarbosatec/tutorial_coach_mark

ユーザーの注意を特定のウィジェットに集中させるためのプラグイン。


### ズバイレマン/フロッグス
https://github.com/zubairehman/Flogs

<img src="https://repository-images.githubusercontent.com/184599060/18477880-6d27-11e9-9e09-3b2a4a689c17" />
Advanced Logging Frameworkは、素早く簡単なロギングソリューションを提供するフラッターで開発されています。


### ibhavikmakwana / sample_data
https://github.com/ibhavikmakwana/sample_data

アプリケーションをテストするためのランダムサンプルデータを生成するFlutterパッケージ。 Androidのサンプルデータに触発されました。


### マスターでの実例別/ playpen / star_wars_crawl
https://github.com/mjohnsullivan/flutter-by-example/tree/master/playpen/star_wars_crawl

「スターウォーズ風」の効果を出すためにリストを変形することに関するクールな例。


### adar2378 / mx_player_plugin
https://github.com/adar2378/mx_player_plugin

フラッタでクローズドキャプション付きのビデオファイルを開くための小さなプラグインパッケージ


### JideGuru / SalesApp
https://github.com/JideGuru/SalesApp

UplabsからのSales App UIの単なるFlutter実装


### CrossPT / flutter_plugin_pdf_viewer
https://github.com/CrossPT/flutter_plugin_pdf_viewer

PDFファイルを処理するためのフラッタープラグイン。 AndroidとiOSの両方で動作します


### n0vah / nested_navigators
https://github.com/n0vah/nested_navigators

独自のルートスタックを持つ複数のネストされたナビゲーターを実装するためのFlutterウィジェット。