環境構築

Flutter を beta channel にして、--enable-web を設定すれば flutter の初期アプリが chrome で動く。

flutter channel beta 
flutter upgrade
flutter config --enable-web
flutter create myapp
cd ./myapp
flutter run -d chrome

的な感じでOK

詳細はここ。
https://flutter.dev/docs/get-started/web

レスポンシブ

https://pub.dev/packages/responsive_builder

コレ使うと便利っぽいけど、これってサイズに応じて返すWidgetを切り替えるような感じだよね。Web慣れしたGrid脳で考えないようにしないといけないのかな。

そもそもがCanvasにゴリゴリ書いている仕組みっぽいね。

https://flutter.dev/docs/development/tools/web-renderers

ビルド

flutter build web

でビルドした成果物をみてどんなことをしているのかイメージできる

index.html

予想通り js でごっりごり書いてますね。
main.dart.js は minification 効いてました。

VSCodeでformatしたら7万行あって流石に読むの大変。とにかくcanvasにゴリゴリという以上の深みは無視した方が良さそう。

いろいろ実装してみているとなんだか不安定なところがいくつか見つかるね。

成功

こういう複数行のテキストがすんなり表示されなかったりする。

失敗

でも何も気にせず実装するとこうなる。文字が切れる。
これは多分、フォントによって高さが異なる（フォントの種類にもよると思う）のをうまく取り扱うことができずに、フォントを基準に決めた高さ× maxLines になるからっぽいねぇ。

Text(
      'すごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキスト',
      maxLines: 3,
      overflow: TextOverflow.fade,
      textAlign: TextAlign.left,
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
),

良い感じのフォントを選ぶか、StructStyleで高さをえいって設定してあげると良さそう。
この辺りの説明はここで議論されている様子。

Text(
      'すごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキストすごく長いテキスト',
      maxLines: 3,
      overflow: TextOverflow.fade,
      textAlign: TextAlign.left,
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
      strutStyle: StrutStyle(
        fontSize: 20.0,
        height: 1.0,
      ),
),

Flutter Web はまだネイティブのジェスチャに対応した「戻る」が効かないことが判明。
ゴリゴリMacユーザーにとっては結構辛いなぁ。
https://github.com/flutter/flutter/issues/23604

$ flutter run -d Chrome --web-renderer html

これを指定しておかないと、NetworkImage(src) で

Failed to load network image.
Image URL:https://hogehoge.piyopiyo/fugafuga.png
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images

こういうのが出る。Trying to load an image from another domain? ってことはドメインが違う？CORSの話？とか思ってみたけどそうではないっぽい。

結果、--web-renderer html でなんやかんや表示される。

web renderer については以下。
https://flutter.dev/docs/development/tools/web-renderers

普通は HTML でいいけど、PCのブラウザの場合はCanvasKitが選ばれる。SkiaベースのWebAssemblyをダウンロードしてくるので（2MB程度だけど）モバイルでそれは申し訳ないよね〜みたいな理由で（たぶん）PC限定になっているっぽい。パフォーマンス的なものはCanvasKitに軍配が上がるからそういうことをしているのかな？この辺りは検証してないのでわからない。

SEO

当たり前と言えばそうなんだが、クライアントサイドで全部構築するのでコンテンツに対するSEOは厳しい

つまりはブログとかには向かない

いまんとこ。