【Flutter】shimmer パッケージを使用して読み込み画面のスケルトンUIを実装する

はじめに

APIからのレスポンスを待っている際やその他データを取得している最中にはユーザの待機時間が発生します。コンテンツを読み込み中である事を視覚的に表示させるUIとしてスケルトンUIがあります。
本記事ではshimmerパッケージを使用してスケルトンUIを実装してみます。

作るもの

SNSのタイムラインを読み込む際をイメージしてスケルトンUIを作成してみます。

環境

• Flutter 3.22.1
• shimmer 3.0.0

パッケージのインストール

shimmerパッケージをインストールします。

flutter pub add shimmer

ソース

SNSのタイムラインの画面をイメージして、スケルトンUIを作成してみます。
Shimmer.fromColors Widgetを使用して、スケルトンUIの要素を表示します。各要素では、baseColorで元となるスケルトンUIの背景色を指定し、highlightColorでハイライトされる際の色を設定します。また、スケルトンUIのアニメーション速度はperiodプロパティで調整します。

main.dart

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TimelineSkeletonScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class TimelineSkeletonScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('タイムライン画面'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Shimmer.fromColors(
              baseColor: Colors.grey.shade300, // Shimmerエフェクトの元となる色
              highlightColor: Colors.grey.shade100, // Shimmerエフェクトのハイライト部分の色
              period: const Duration(seconds: 2), // エフェクトの速度を調整
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      const CircleAvatar(
                        radius: 20,
                        backgroundColor: Colors.white,
                      ),
                      const SizedBox(width: 10),
                      Container(
                        width: 150,
                        height: 20,
                        color: Colors.white,
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Container(
                    width: double.infinity,
                    height: 150,
                    color: Colors.white,
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

実行結果

デバッグして確認すると、以下のようにスケルトンUIが表示されます。

参考