Flutter データのローディング表示に使えるパッケージ part2

今回もFlutter データのローディング表示に使えるパッケージを紹介します。
前回はredactedというパッケージを紹介しましたが、今回紹介するパッケージはskeletonizerというパッケージです。

Converts already built widgets into skeleton loaders with no extra effort.

redactedもとても便利なパッケージですが、skeletonizerはより簡単にローディング表示を組み込め、個人的にはこちらのパッケージの方が好みです。

ではさっそく実装の仕方についてです。

import 'package:flutter/material.dart';
import 'package:flutter_skeletonizer/flutter_skeletonizer.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeletonizer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SkeletonLoaderExample(),
    );
  }
}

class SkeletonLoaderExample extends StatefulWidget {
  @override
  _SkeletonLoaderExampleState createState() => _SkeletonLoaderExampleState();
}

class _SkeletonLoaderExampleState extends State<SkeletonLoaderExample> {
  // 仮のデータを保存するリスト
  List<String> _items = [];
  bool _isLoading = true;

  // ダミーデータを非同期にロードするメソッド
  Future<void> _loadData() async {
    await Future.delayed(Duration(seconds: 3));

    setState(() {
      _isLoading = false;
      _items = List.generate(20, (index) => "Item $index");
    });
  }

  @override
  void initState() {
    super.initState();
    _loadData(); 
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Skeletonizer Example'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Skeletonizer(
            enabled: _isLoading,
            child: ListTile(
              title: Container(
                color: Colors.grey[300],
                height: 20.0,
                width: double.infinity,
              ),
            ),
          );
        },
      ),
    );
  }
}

Skeletonizer widgetをラップし、enabledプロパティを使いローディング表示のON、OFFを切り替えるような感じになっています。

とても簡単に実装可能なので、ぜひ使ってみてください。