Flutter webでネットワーク画像が表示されない時の対処法【2022年3月現在】

はじめに

Firebaseなどから取ってきた画像のURLを使って、Flutter webで表示するとエラーが出ました。その時の対処法について書きます。
※2022年3月現在のエラーなので、今後のアップデートによりこのエラー自体が消える可能性があります。ご注意ください。

エラーの例

例として以下の、URLから写真を表示するコードを使います。

net_sample.dart

class NetSample extends StatelessWidget {
  const NetSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Container(
                width: 500,
                height: 500,
                child: Image.network("https://user-images.githubusercontent.com/89324742/157608435-2aaf7d31-6db4-4831-a1c6-3bf9fdae8070.JPG"))
          ],
        ),
      ),
    );
  }
}

これを

flutter run -d chrome

でChromeデバッグをすると

このように画像が表示されません。ターミナルには

The following ImageCodecException was thrown resolving an image codec:
Failed to load network image.

とエラーメッセージが出ました。

対処法

以下のように実行してください。

flutter run -d chrome --web-renderer html

すると画像が正常に表示されます。

また、build webする時は、

flutter build web --web-renderer html --release

と実行してください。

おわりに

少しでも参考になれば幸いです！！