週刊 Dart & Flutter インプット １

毎週金曜日に、@ntaoo がインプットしたDart & Flutterの情報のリンク集をまとめて共有します。

Flutter Clock Challenge

Flutter Clock

締め切り迫る（January 20, 2020 at 11:59pm PST）。

Flutter Widget of the Week

Image

FlutterのWidgetはimage loading中のアニメーション表示等の典型的なユースケースを考慮して、named constructor他の覚えやすい手法で提供してくれるところが素晴らしい。

着々と進むFlutterのPWA対応

Add support for web app manifests and arbitrary resource files by jonahwilliams · Pull Request…

[flutter_tools][web] Add basic service worker generation support to web applications by…

さっそくPWA対応Flutterのデプロイをやってみた記事がでた。

How to develop & launch a Progressive Web App with Flutter?

Text in Flutter: Building a fancy chat bubble at GDD China

Textの制御方法のデモがとても勉強になった。Strutで行間を統一したり、画像をWidgetSpanを用いてインライン化して、まるで絵文字のような文字の連なりの一部に見えるように表示したり等々。

この能力を支えるのはLibText (C++）で、以前はChromiumのBlinkを使っていたが、Webのレガシー依存やライセンス問題を回避するため、LibTextを開発して切り替えたそうだ。

package:get_it, service locator patternの解説

Creating services to do the work in your Flutter app

解説の質が高い。

Packages

Lantern

kikuchy/lantern

Firestoreのスキーマ用DSLを定義して、多言語（Swift, Dart, TypeScript）のFirestore modelコードとsecurity ruleの生成をするライブラリ。100%Dart製。（私はまだ試していません）

qrscan

package:qrscanをそれを用いたQRコードリーディングアプリのサンプル

Create a QR based Identification Scanner App with Flutter

DShell

dshell — build console apps in dart

シェルスクリプトの代わりにDartでスクリプトを書く際の書きやすさを上げる試み。

コードの雰囲気を掴むにはこれを参照。https://github.com/bsutton/dshell#our-first-real-script

基本的なコマンドはビルトインされている。https://github.com/bsutton/dshell#what-commands-does-dshell-support

Static extension methodをうまく使って、従来のDartコードよりもなめらかにシェルスクリプトの実行結果をDartコードで引き継いで書ける。まだ若いので、もうすこし成熟したら採用を再検討。Dart中心のプロジェクトでは、DShellを採用するかは別として、シェルスクリプトやPythonスクリプトよりもDartでスクリプトを書くほうが概して生産性が高い。

関連: Grinder

google/grinder.dart

こちらは成熟しており安定。

GetFlutter (オープンソースUIライブラリ）

GetFlutter | Get Flutter - Open source UI library for flutter app

バッジやカルーセルなどのコードがオープンソースになっているので、これをそのまま使うなり実装の参考にするなりできる。

ionicfirebaseapp/getflutter

Ionicと同一の組織？

Ionic - Cross-Platform Mobile App Development

サンプルアプリ

仮想通貨コンバートアプリとメトロノームアプリ

foxy1990/my_crypto_currency

foxy1990/my_metronome_timer

どちらも学習に適したコードサイズ。

FlutterでSQLiteにbase64でimageを保存する方法の説明とサンプルコード

Google’s Flutter Tutorial — Save Image as String in SQLite Database

ソーティングアルゴリズムのVisualization

ソーティングの経過をStreamでUIに通知してCustomPaintで描画している。ソースコードつきのビデオ解説。

How to Fetch preview of link in flutter

OGPなどの情報を表示するコーディングの解説。htmlをparseして必要な情報を表示するだけ。

html | Dart Package

Off-JTで縫合の出来を評価するAngularDart製クライアントアプリ

studiome/suture-eval-web-app

Paperとともに公開されている。現役医師という経歴もアプリの用途もとてもユニーク。

その他

Flutter採用のリスク分析

私も、GoogleAdsクライアント等の第一級のミッションクリティカルなアプリがFlutterで開発されている事実をもって、今度は本物だと思う。

情報源

Community and support

Community

https://twitter.com/ntaoo が、followさせていただいている方々

最新の情報を中心にしますが、少し古めでも私が見つけた際に有益と判断した情報も載せていきます。情報の網羅性の高さは不明です。継続を重視して省力化しています。

• 公式情報は優先順位最高にして載せます。
• それら以外の情報は、私の関心に基づいて適当に間引きます。
• 基礎は、https://dart.dev/codelabs , https://flutter.dev/docs , Udemyなどのオンラインビデオトレーニングコース、または書籍などで体系的に学んで習得しましょう。