Flutter web can’t load network image from another domain エラーで画像が取得できない場合の対処

Flutter で以下のようにして画像を取得しようとした際に別ドメインのためにエラーが発生したので対処しました。

失敗コード

Image.network を使用するとエラーが発生します。

class MyImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    String imageUrl = "image_url";
    return Image.network(imageUrl),
  }
}

対応方法

画像を取得してHTMLを生成するようにして対処を行います。

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MyImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    String imageUrl = "image_url";
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
      (int _) => ImageElement()..src = imageUrl,
    );
    return HtmlElementView(
      viewType: imageUrl,
    );
  }
}

参考

• Flutter web can’t load network image from another domain - Stack Overflow