Flutterの画像読込がバチクソに遅いので色々試してみる1【プレースホルダーの設定】

やりたいことは表題の通りです

こんなコードを実装しました（mockなので変数名は適当です）
・API側からカルーセルデータを取得しmap, iという変数にデータを一時的に格納しています
・カルーセルを読み込みたい親ViewにてAPIを叩いてもらい、GETしたデータをCarouselComponentに入れてもらって使うという使用イメージです

child: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.width / 1.618,
  margin: EdgeInsets.symmetric(horizontal: 5.0),
  decoration: BoxDecoration(
    color: Colors.grey,
  ),
  child: Image.network(
    i.imageURL,
    fit: BoxFit.fill,
  ),
),

これでひとまず「カルーセルAPIを叩いて画像を読み込む」というところで最低限のところはクリアすることができました。ところがまあ通信が遅い遅い。なので、いろいろと試していきます。

今日は画像が表示されるまで画面が白いままなので、プレースホルダーとIndicatorの実装を行います。

Image.networkって結構できることありそうですね。

Image.network(
    String src, {
    Key? key,
    double scale = 1.0,
    ImageFrameBuilder? frameBuilder,
    ImageLoadingBuilder? loadingBuilder,
    ImageErrorWidgetBuilder? errorBuilder,
    String? semanticLabel,
    bool excludeFromSemantics = false,
    double? width,
    double? height,
    Color? color,
    Animation<double>? opacity,
    BlendMode? colorBlendMode,
    BoxFit? fit,
    AlignmentGeometry alignment = Alignment.center,
    ImageRepeat repeat = ImageRepeat.noRepeat,
    Rect? centerSlice,
    bool matchTextDirection = false,
    bool gaplessPlayback = false,
    FilterQuality filterQuality = FilterQuality.medium,
    bool isAntiAlias = false,
    Map<String, String>? headers,
    int? cacheWidth,
    int? cacheHeight,
    WebHtmlElementStrategy webHtmlElementStrategy = WebHtmlElementStrategy.never,
})

今回はloadingBuilderを使います

child: Image.network(
    i.imageURL,
    fit: BoxFit.fill,
    loadingBuilder: (context, child, loadingProgress) {
      switch (loadingProgress) {
        case null: return child;
        default: return CircularProgressIndicator(); //Indicatorのサイズは各自調整してください
      }
    },
),

ポイントとしては引数にcontext, load終わった時に表示するchild, loadingProgressの3つ引数を取っておいて、基本はCircularProgressIndicatorを表示し、終わったらchildが表示できるようにしておきます。loadingProgressについては他にも異常処理系のchildが増えた時に備えてenum-caseで定義しておきます。

今回はCirucularProgressIndicator()を置きましたが、ちょっと頑張ってキラつくスケルトンスクリーンを実装してみるのもよいかもしれませんね　

次回に続きます