【Flutter】一味違う ローディング を実装しよう！

本記事では、そんな悩みにお答えします。

一味違うローディングのアニメーションの実装方法として、
loading_animation_widgetパッケージを使った方法を紹介します。

例えば、こんなローディングが実装できます。

あなたのアプリの出来栄えをワンランク上げること間違いなしです！

ぜひ読んで見てください！

loading_animation_widget パッケージ

loading_animation_widget パッケージは、
さまざまなローディングのアニメーションを提供してくれるパッケージです。

簡単に、一味違うローディングを実装可能です。

早速実装方法についてみていきましょう。

実装方法

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

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

pubspec.yaml のdependenciesに以下のように追記します。

dependencies:
  flutter:
    sdk: flutter
  loading_animation_widget: ^1.1.0+3 #追記

追記したら flutter pub get をし、パッケージをインストールしましょう。

インポート

ローディングを実装したいdartファイルに以下の文を追加し、パッケージをインポートしましょう。

import 'package:loading_animation_widget/loading_animation_widget.dart';

これで利用する準備は完了です。

LoadingAnimationWidgetの追加

実装したい部分にLoadingAnimationWidgetを追加しましょう。

実装サンプルコードは以下の通りです。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Loading Animation Demo Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blue,
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: LoadingAnimationWidget.inkDrop(  //この部分
            color: Colors.white,
            size: 100,
          ),
        ));
  }
}

実装例

LoadingAnimationWidgetにはさまざまなアニメーションパターンのWidgetが用意されています。

本記事ではいくつかのパターンを紹介します。

inkDropパターン

LoadingAnimationWidget.inkDrop(
  color: Colors.white,
  size: 100,
),

staggeredDotsWaveパターン

LoadingAnimationWidget.staggeredDotsWave(
  color: Colors.white,
  size: 100,
),

flickrパターン

LoadingAnimationWidget.flickr(
  leftDotColor: Colors.greenAccent,
  rightDotColor: Colors.redAccent,
  size: 100,
),

その他

その他のアニメーションパターンについては、以下のページでgifで全て紹介されています。
こちらを参照し、好きなものを選んでください。

loading_animation_widget | Flutter package

Loading animation or loading spiner or loader. It's used to show loading animation when the app is in loading state or something is processing for uncertain tim...

pub.dev

まとめ

本記事では一味違うローディングのアニメーションの実装方法として、
loading_animation_widgetパッケージを使った方法を紹介しました。

ローディングのアニメーションを変えるだけで、
見た目がワンランク上のアプリになるので、
loading_animation_widgetパッケージはおすすめです。

ぜひ、利用してみてください！

本記事があなたのアプリ開発の一助となれば幸いです。

編集後記（2022/4/6）