【 Shimmer 】ローディング効果を追加しよう！【Flutter】

テキストや画像にローディング効果を追加したい！

本記事ではそんな要望にお答えします。

テキストや画像、コンテナーにローディング効果を追加するパッケージ、
Shimmer パッケージを紹介します。

以下の画像のようなUIが、Shimmerパッケージを使うと、

以下のGIFのようになります。

このようなUIが簡単に実装可能です！
ぜひ読んで使ってみてください！

Shimmer の使い方
1. 準備
2. 実装
まとめ
編集後記（2022/9/29）

Shimmer の使い方

準備

まず準備として、パッケージのインストールと、
Dartファイルへのインポート文の追加を行います。

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

CLI(macならターミナル)で、自分のプロジェクトのルートにて
以下のコマンドを実行しパッケージをインストールします。

flutter pub add shimmer

パッケージのインポート

実装したいDartファイルの上部に以下のインポート文を追加し、
パッケージをインポートします。

import 'package:shimmer/shimmer.dart';

実装

実装方法について解説します。

ローディング効果を追加したいウィジェットを、Shimmer.fromColorsでラップします。
baseColorプロパティにて、ベースとなる色を設定します。
highlightColor プロパティにてハイライトの色(流れるエフェクトの色)を設定します。

Shimmer.fromColors(
  baseColor: Colors.grey[300]!,
  highlightColor: Colors.grey[100]!,
  child: ...
)

これだけでテキストや画像、コンテナーにローディング効果を追加することができます。

サンプルコード全体

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shimeer Sample'),
      ),
      body: Shimmer.fromColors(
        baseColor: Colors.grey[300]!,
        highlightColor: Colors.grey[100]!,
        child: SingleChildScrollView(
          child: Column(
            children: [
              const MyContainers(),
              const MyContainers(),
              const MyContainers(),
              const MyContainers(),
              const MyContainers(),
              const MyContainers(),
              const MyContainers(),
              const MyContainers(),
              const Text(
                'Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World ',
                style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(
                width: 100,
                height: 100,
                child: Image.asset('assets/flutteruniv_logo.png'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class MyContainers extends StatelessWidget {
  const MyContainers({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: Row(
        children: [
          Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
          const SizedBox(width: 20),
          Expanded(
            child: Column(
              children: [
                Container(
                  height: 20,
                  color: Colors.green,
                ),
                const SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Container(
                    height: 20,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}