Flutterウィークリー #63

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

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

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


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

### FlutterよるGraphQLの探索
https://dev.to/solutelabs/exploring-graphql-with-flutter-4mdp

<img src="http://dev.to/social_previews/article/119426.png" />
このブログ記事では、Milind MevadaがFlutter GraphQLを実装するために利用できるさまざまな方法について説明します。


### ハイブリッド開発にFlutterを使用する方法：Alibabaのオープンソースコードインスタンス
https://hackernoon.com/how-to-use-flutter-for-hybrid-development-alibabas-open-source-code-instance-302bf2273485

<img src="https://cdn-images-1.medium.com/max/1200/0*dRSqNGEFlqvlPlkj.png" />
AlibabaのXianyuが、 Flutter Boostを使用した段階的な移行を通じて、既存のネイティブアプリへのFlutterハイブリッド統合を可能にする方法


### カスタムプログレスローダーでFABをラップする
https://jorgecastillo.dev/flutter-canvas-i-wrap-fab-in-custom-progress-loader

<img src="https://jorgecastilloprz.github.io/assets/images/painting.jpg" />
Jorge Castilloが、FloatingActionButtonの周りに独自の丸で囲まれたプログレスローダーを段階的に実装する方法を説明します。


### キーボードがFlutter表示されFlutter UIをアニメートする
https://medium.com/flutter-community/animate-your-ui-when-keyboard-appears-in-flutter-86465a2a70a4

<img src="https://cdn-images-1.medium.com/max/1200/1*wgS_AnwbLQWz94xb6djAIg.jpeg" />
このチュートリアルでは、Dane Mackierがキーボードの可視性を監視し、表示されたときにビューを滑らかに変化させることに取り組んでいます


### Flutterアニメーション - はじめに＃1
https://medium.com/flutterdevs/animations-in-flutter-getting-started-1-1e5710e18515

<img src="https://cdn-images-1.medium.com/max/1200/1*KcxCTzISut_FEkKduDE4hw.gif" />
Mohak GuptaによるFlutterアニメーションの基本の紹介。


### Flutter位置情報サービスを構築する
https://medium.com/flutter-community/build-a-location-service-in-flutter-367a1b212f7a

<img src="https://cdn-images-1.medium.com/max/1200/1*8GhxuShXV7qMWAHcYgqrcw.jpeg" />
このDane Mackierによるチュートリアルでは、ロケーションパッケージをアプリケーションで簡単に利用できるサービスにラップする方法を説明します。


### Flutterで3分でオンボーディングページインジケータを作成します。
https://medium.com/aubergine-solutions/create-an-onboarding-page-indicator-in-3-minutes-in-flutter-a2bd97ceeaff

<img src="https://cdn-images-1.medium.com/max/1200/1*J827d3JDrduBC2Gy_NPI6Q.png" />
Pinkesh Darjiが、 Flutterすばやくオンボーディングページを作成する方法を紹介します。


### クロスプラットフォームFlutterランディングページの設計
https://medium.com/flutter-community/designing-cross-platform-flutter-landing-page-f51fd1b5af18

<img src="https://cdn-images-1.medium.com/max/1200/1*jDcSQe6D4IupGUp2-yxutw.jpeg" />
Priyanka Tyagiによるこの記事は、 Flutter用の仮想のモバイルアプリとWebアプリのランディングページを設計する方法についてのものです。


### Flutterクロスプラットフォーム
https://medium.com/@segaud.kevin/flutter-cross-platform-a2371fe790e7

<img src="https://cdn-images-1.medium.com/max/1200/1*tE7hwxGcg3hg35EXUk3W0g.jpeg" />
Kevin Segaudは、作業を簡単にするためにいくつかのパッケージを使用してモバイルおよびWeb用のアプリを作成します。


### Flutter ：グローバルアクセスとプロバイダによるスコープアクセス
https://medium.com/coding-with-flutter/flutter-global-access-vs-scoped-access-with-provider-8d6b94393bdf

<img src="https://cdn-images-1.medium.com/max/1200/1*HoXBqjaSK40qcR5f4OzsUg.jpeg" />
Andrea Bizzottoは、ウィジェットツリー全体にオブジェクトを分散させるための、グローバルアクセスへのより良い代替手段を探ります。


### FirestoreとAlgoliaを使ったFlutter全文検索
https://medium.com/flutter-community/full-text-search-in-flutter-with-firestore-and-algolia-8de1a10b0c49

<img src="https://cdn-images-1.medium.com/max/1200/1*UjycBuNEqNXcC4mk18yvog.png" />
Samarth Agarwalが、Firestore情報を全文検索するための検索サービスAlgoliaの使い方を説明します。


### Flutter Googleマップスタイリング
https://medium.com/@matthiasschuyten/google-maps-styling-in-flutter-5c4101806e83

<img src="https://cdn-images-1.medium.com/max/1200/1*9OQhrO9KuIrJT95lQqtx4g.png" />
Matthias Schuytenが、Googleマッププラグインの新しいsetMapStyleメソッドを使用してアプリマップをスタイルする方法を説明します。


### Flutterコードを改善する
https://medium.com/@MiBLT/improving-your-flutter-code-7424b10dc16a

<img src="https://cdn-images-1.medium.com/max/1200/1*qiQsNEGnHV216TO603fwzw.png" />
Gitフックを利用して各コミットのテストとリントを実行するためのMiguel Beltranによる記事。


### Flutter ITテストに国際化文字列を再利用する
https://medium.com/@efthymis/reusing-i18n-strings-for-it-testing-in-flutter-cead2aa5c914

<img src="https://cdn-images-1.medium.com/max/1200/1*1X-_xDbm03LntXVWYhKb7g.png" />
Efthymis Sarmpanisがあなたのテストで翻訳を処理する方法を説明します。


### Flutterの変換ウィジェットとGestureDetectorウィジェットの力
https://medium.com/flutter/the-power-of-the-flutters-transform-and-gesturedetector-widgets-6834f5a25be9

<img src="https://cdn-images-1.medium.com/max/1200/1*6hQYJrDKEE1r961qkxrMwQ.jpeg" />
Justin McCandlessによるジェスチャー検出器と組み合わされた変換とマトリックスのこの驚くべき使い方を確認してください


### Flutter ：カスタムフックを使ったアニメーショングラデーション
https://www.paddo.org/flutter-animated-gradients-with-hooks/

<img src="https://www.paddo.org/content/images/2019/06/gradient_hook-2.png" />
この場合、 Flutterでフックを使用してグラデーションの背景をアニメートする例。


### Flutterチャンネルを使用した独自のイメージピッカー
https://www.raywenderlich.com/2882495-your-own-image-picker-with-flutter-channels

<img src="https://koenig-media.raywenderlich.com/uploads/2019/05/FLutterTalkingPlatformCode-twitter-1.png" />
JB Lorenzoによるこのチュートリアルでは、 Flutter Channelsを使用してプラットフォームコードと通信し、AndroidとiOSの両方のイメージピッカーを作成する方法を学びます。


# ビデオ＆メディア

### AnimatedIcon（今週のFlutterウィジェット）
https://www.youtube.com/watch?v=pJcbh8pbvJs&feature=youtu.be

<img src="https://i.ytimg.com/vi/pJcbh8pbvJs/maxresdefault.jpg" />
AnimatedIconウィジェットを使用して、アニメーションアイコンをアプリに直接ドロップします。


### アニメーションによるFlutter放射状の進歩 - ステップバイステップ
https://www.youtube.com/watch?v=3J5FR2H5FDk&feature=youtu.be

<img src="https://i.ytimg.com/vi/3J5FR2H5FDk/maxresdefault.jpg" />
このチュートリアルでは、customPainterの使い方と、アプリの順方向および逆方向のアニメーションの使い方も学びます。


### Flutter ：JSONから自動モデル作成直列化可能
https://www.youtube.com/watch?v=hAbXdcHpx_U&feature=youtu.be

<img src="https://i.ytimg.com/vi/hAbXdcHpx_U/maxresdefault.jpg" />
jsonからモデルクラスを自動的に作成する方法を学ぶ


### Flutter ：ベストVSコード拡張（Bracket Colorizer 2、Pubspec Assistなど）
https://www.youtube.com/watch?v=wO0DHuQFhnQ

<img src="https://i.ytimg.com/vi/wO0DHuQFhnQ/hqdefault.jpg" />
AS上でVSCodeを使用している人のために、ここに便利なプラグインのリストがあります。


### Flutter紹介 - ステートフルおよびステートレスウィジェット、ウィジェットツリー - パート1
https://www.youtube.com/watch?v=-QRQIKtPTlI&feature=youtu.be&app=desktop

<img src="https://i.ytimg.com/vi/-QRQIKtPTlI/maxresdefault.jpg" />
基本レベルでウィジェットツリーとステートレスおよびステートフルウィジェットを説明する。


### 分離とイベントループ - Flutterインフォーカス
https://www.youtube.com/watch?v=vl_AaCgudcY

<img src="https://i.ytimg.com/vi/vl_AaCgudcY/maxresdefault.jpg" />
これは、 Dart非同期コーディングに関するFlutter in Focusシリーズの最初のビデオです。


### FlutterとFCMによるスマートプッシュ通知
https://www.youtube.com/watch?v=2TSm2YGBT1s&feature=youtu.be

<img src="https://i.ytimg.com/vi/2TSm2YGBT1s/maxresdefault.jpg" />
Firebaseクラウドメッセージング（FCM）を使用してFlutterプッシュ通知を単一のデバイス、トピック、またはユーザーセグメントに送信します。


# ライブラリ＆コード

### エアリウム/ベジエチャート
https://github.com/aeyrium/bezier-chart

非常にインタラクティブで設定可能なフラッターのための美しいベジエ折れ線グラフウィジェット。


### アリババ/ flutter_boost
https://github.com/alibaba/flutter_boost

Flutter Boostは、最小限の労力で既存のネイティブアプリケーションにFlutterをハイブリッド統合することを可能にするFlutterプラグインです。


### andrewackerman / darq
https://github.com/andrewackerman/darq

Dartへの.NETのLINQ IEnumerable関数の移植。


### アップルエデュケーション/ flutter_everywhere
https://github.com/AppleEducate/flutter_everywhere

iOS、Android、Fuschica、MacOS、Windows、Linux、Web、コマンドライン用のテンプレートFlutterプロジェクト


### blankapp / flutter_flipperkit
https://github.com/blankapp/flutter_flipperkit

ばたつきのためのFlipper（拡張可能なモバイルアプリデバッガ）。


### flschweiger /返信
https://github.com/flschweiger/reply

<img src="https://repository-images.githubusercontent.com/184257830/3bdd2000-8f6f-11e9-8edf-d3256642541b" />
このプロジェクトは、 Flutter Reply Material Designのケーススタディをピクセル単位で実装することを目指しています。


### flutter-devs / flutter_github_profiler
https://github.com/flutter-devs/flutter_github_profiler

GitHubのプロフィールの詳細をフラッターで取得するデモアプリ。


### flutter-devs / flutter_MakeMyTrip_UI_Demo
https://github.com/flutter-devs/flutter_MakeMyTrip_UI_Demo

Flutterを使用してMake My TripアプリのUIデモを表示するサンプルアプリケーション。


### ゴーフラッターデスクトップ/ゴーフラッター
https://github.com/go-flutter-desktop/go-flutter

Flutterに基づいて- Windowsの、MacOSのおよびLinux上のFlutter埋め込み、移動しGLFW。


### HomeXLabs / lookback-ios-flutter
https://github.com/HomeXLabs/lookback-ios-flutter

Lookback iOS SDK用のFlutterプラグイン


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

新しいFlutterアプリケーションは、カードアニメーションの拡張を実演します。


### rushio-consulting / all_platform_example
https://github.com/rushio-consulting/all_platform_example

Flutterモバイル、デスクトップおよびWeb用の例のクロスプラットフォームのアプリケーション


### rushio-consulting / flutter_camera_ml_vision
https://github.com/rushio-consulting/flutter_camera_ml_vision

カメラストリームを表示し、それにMLビジョン認識を可能にするフラッターウィジェット、それはあなたがバーコード、ラベル、テキスト、顔を検出することを可能にします...


### thorandresen / one_time_dialog
https://github.com/thorandresen/one_time_dialog

アラートダイアログをX回表示できるFlutterパッケージのリポジトリ。