ブログ

Flutter Loading Indicatorとは

Flutter Loading Indicatorは、アプリケーションが何かの処理を行っている間にユーザーに表示する視覚的なフィードバックを提供するためのウィジェットです。これは、データのダウンロード、ファイルのアップロード、計算の実行など、時間がかかる操作を行っている間に特に役立ちます。

Flutterでは、CircularProgressIndicatorやLinearProgressIndicatorなど、さまざまな種類のLoading Indicatorが提供されています。これらは、操作の進行状況を示すために使用されます。進行状況が不明な場合（例えば、ネットワークからの応答を待っている間など）は、これらのインジケーターは「スピン」またはアニメーションを続けます。

これらのインジケーターは、ユーザーエクスペリエンスを向上させ、ユーザーがアプリケーションがまだ動作していることを知ることができるため、非常に重要です。それらはまた、ユーザーがアプリケーションが応答しなくなったと感じるのを防ぐのに役立ちます。したがって、適切なLoading Indicatorの使用は、優れたユーザーインターフェース設計の一部となります。

種類と特性: サーキュラー（円形）とリニア（線形）

Flutterでは、主に2つのタイプのLoading Indicatorが提供されています：サーキュラー（円形）とリニア（線形）です。

サーキュラー（円形）インジケーター

CircularProgressIndicatorは、進行中の操作を示すための円形のインジケーターです。このインジケーターは、操作の進行状況が不明な場合や、操作が完了するまでの時間が不確定な場合に特に役立ちます。このような状況では、インジケーターは連続的に「スピン」します。

リニア（線形）インジケーター

一方、LinearProgressIndicatorは、進行中の操作の進行状況を示すための線形のインジケーターです。このインジケーターは、操作の進行状況が具体的に知られている場合、つまり操作が完了するまでの具体的なパーセンテージがわかっている場合に特に有用です。このような状況では、インジケーターは操作の進行状況に応じて増減します。

これらのインジケーターは、それぞれ異なる状況と要件に対応するために設計されており、それぞれがユーザーエクスペリエンスを向上させるための重要な役割を果たしています。それぞれの特性と使用例を理解することで、より効果的なユーザーインターフェースを設計することができます。

進捗が分かる場合と進捗が不定の場合

FlutterのLoading Indicatorは、進捗が分かる場合と進捗が不定の場合の両方で使用できます。これらの状況を理解することで、より効果的なユーザーインターフェースを設計することができます。

進捗が分かる場合

進捗が分かる場合、つまり操作が完了するまでの具体的なパーセンテージがわかっている場合、LinearProgressIndicatorが特に有用です。このインジケーターは、操作の進行状況に応じて増減します。例えば、ファイルのアップロードやダウンロードなど、進行状況が明確に知られている操作でよく使用されます。

進捗が不定の場合

一方、進捗が不定の場合、つまり操作が完了するまでの時間が不確定な場合、CircularProgressIndicatorが役立ちます。このインジケーターは、操作が完了するまで連続的に「スピン」します。例えば、ネットワークからの応答を待っている間など、進行状況が不明な操作でよく使用されます。

これらのインジケーターは、それぞれ異なる状況と要件に対応するために設計されており、それぞれがユーザーエクスペリエンスを向上させるための重要な役割を果たしています。それぞれの特性と使用例を理解することで、より効果的なユーザーインターフェースを設計することができます。

全画面でプログレスインジケーターを表示する方法

Flutterでは、全画面でプログレスインジケーターを表示するためのいくつかの方法があります。以下に一例を示します。

void showLoadingIndicator(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return Dialog(
        child: new CircularProgressIndicator(),
      );
    },
  );
}

void hideLoadingIndicator(BuildContext context) {
  Navigator.pop(context);
}

上記のコードでは、showDialog関数を使用して新しいダイアログを表示しています。このダイアログの中にCircularProgressIndicatorを配置することで、全画面でのローディングインジケーターを実現しています。また、hideLoadingIndicator関数を呼び出すことで、ローディングインジケーターを非表示にすることができます。

この方法は、ユーザーがアプリケーションの他の部分を操作できないようにする場合に特に有用です。ただし、ユーザーが他の操作を行うことを阻害しないように、ローディングインジケーターは適切に使用することが重要です。

サンプルコードとその解説

以下に、FlutterでLoading Indicatorを表示するためのサンプルコードとその解説を示します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loading Indicator Sample'),
        ),
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

このサンプルコードでは、CircularProgressIndicatorウィジェットを使用して、アプリケーションの中央にLoading Indicatorを表示しています。

まず、MyAppクラスがMaterialAppウィジェットを返すことで、アプリケーションの基本的なレイアウトを設定しています。次に、Scaffoldウィジェットを使用して、アプリケーションの主要な部分（この場合はAppBarとBody）を提供しています。

AppBarには、アプリケーションのタイトルを表示するTextウィジェットが含まれています。Body部分では、Centerウィジェットを使用して、その子ウィジェットであるCircularProgressIndicatorを画面の中央に配置しています。

このように、Flutterでは、簡単なコードでLoading Indicatorを表示することができます。また、これらのウィジェットはカスタマイズ可能であり、アプリケーションの要件に合わせて調整することができます。