【Flutter】CupertinoActivityIndicator: iOS風ローディング

import 'package:flutter/cupertino.dart';

CupertinoActivityIndicator();

CupertinoActivityIndicatorの利用シーン

CupertinoActivityIndicatorの最も一般的な利用シーンは、アプリケーションがユーザーからの要求を処理中であることを示す場合です。具体的には、データの読み込み、ファイルのダウンロード、画像のアップロードなど、時間がかかる可能性がある操作を行っているときに表示されます。これにより、ユーザーはアプリケーションがまだ応答を返していない理由を理解できます。

たとえば、ウェブから大量のデータを取得する必要がある場合、以下のようなコードを書くことでCupertinoActivityIndicatorを表示できます。

FutureBuilder(
  future: fetchDataFromWeb(), 
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CupertinoActivityIndicator();
    } else {
      // return your actual UI
    }
  },
);

このコードでは、データの取得中にCupertinoActivityIndicatorが表示され、データの取得が完了すると実際のUIが表示されます。これにより、ユーザーはアプリがまだ応答を返していない理由を理解でき、ユーザーエクスペリエンスが向上します。

CupertinoActivityIndicatorの実装方法

パッケージのインポート

CupertinoActivityIndicatorを使用するためにはまず、cupertinoライブラリをインポートする必要があります。cupertinoライブラリはFlutterの一部であり、iOSスタイルのウィジェットを提供しています。以下のようなコードでインポートできます。

import 'package:flutter/cupertino.dart';

これにより、CupertinoActivityIndicatorを含むすべてのcupertinoウィジェットが利用可能になります。

CupertinoActivityIndicatorの基本的な使い方

CupertinoActivityIndicatorの基本的な使い方は非常に簡単です。基本的には、ウィジェットツリーの任意の位置にCupertinoActivityIndicatorウィジェットを挿入します。

以下に簡単な例を示します。

CupertinoActivityIndicator();

これは、デフォルトの状態でCupertinoActivityIndicatorを作成します。このコードは、アプリケーションが何かの処理を行っていてユーザーが待つべきであることを示します。

CupertinoActivityIndicatorは、いくつかのパラメータを持っていますが、そのすべては任意で、デフォルトの値が提供されています。たとえば、animatingパラメータは、インジケータがアニメーション表示されるかどうかを制御します。デフォルトでは、animatingはtrueに設定されており、インジケータはアニメーション表示されます。しかし、以下のように設定することで、これを非アニメーション表示に変更することができます。

CupertinoActivityIndicator(animating: false);

以上がCupertinoActivityIndicatorの基本的な使い方です。シンプルなコードで、ユーザーフレンドリーなインターフェースを提供できます。

CupertinoActivityIndicatorの詳細

CupertinoActivityIndicatorのコンストラクタ

CupertinoActivityIndicatorには二つの主要なコンストラクタがあります。一つはデフォルトのCupertinoActivityIndicator()で、これは常に回転するインジケータを作成します。もう一つはCupertinoActivityIndicator.partiallyRevealedで、これは一部のみ表示するインジケータを作成します。

CupertinoActivityIndicatorのプロパティ

CupertinoActivityIndicatorクラスにはいくつかのプロパティがあります。主要なプロパティは以下のとおりです。

• animating: このプロパティはbool型で、インジケータがアニメーション表示されるかどうかを制御します。デフォルトではtrueに設定されています。

• radius: このプロパティはdouble型で、インジケータの半径を制御します。デフォルト値は10.0です。

• progress: これはpartiallyRevealedコンストラクタで使用されるプロパティで、0.0から1.0の間の値を取り、インジケータの表示する部分を制御します。

以下は、radiusとanimatingを変更する例です：

CupertinoActivityIndicator(
  animating: true,
  radius: 15.0,
);

Q&A

Q1: CupertinoActivityIndicatorは何ですか？

CupertinoActivityIndicatorは、iOSスタイルのローディングインジケーターで、データの読み込みなどの処理が完了するまでの間に表示されます。Flutterのウィジェットの一つで、特別なパッケージをインポートする必要はありません。

Q2: CupertinoActivityIndicatorの基本的な使い方は何ですか？

CupertinoActivityIndicatorの基本的な使い方は非常にシンプルです。ウィジェットツリーにCupertinoActivityIndicator()を追加するだけで、デフォルトのインジケーターが表示されます。

Q3: CupertinoActivityIndicatorと他のActivityIndicator、例えばCircularProgressIndicatorとの違いは何ですか？

CupertinoActivityIndicatorと他のActivityIndicatorの主な違いは、見た目とプラットフォーム依存性にあります。CupertinoActivityIndicatorはiOSスタイル（Cupertino）に準拠しています。一方で、CircularProgressIndicatorなどの他のActivityIndicatorはマテリアルデザイン（GoogleのUIデザインガイドライン）に準拠しています。

まとめ

全体をまとめますと、FlutterのCupertinoActivityIndicatorはiOSスタイルのローディングインジケーターです。これは、主にデータの読み込みや取得中など、何かしらのプロセスが完了するのをユーザーが待つ際に使われます。このウィジェットはFlutterフレームワークの一部で、特別なパッケージをインポートする必要はありません。

CupertinoActivityIndicatorの使い方は非常に簡単です。CupertinoActivityIndicator()をウィジェットツリーに追加するだけで、デフォルトのインジケーターが表示されます。

また、CupertinoActivityIndicatorと他のActivityIndicatorとの違いについては、主に見た目とプラットフォーム依存性にあります。CupertinoActivityIndicatorはiOSスタイルで、Cupertino（AppleのUIデザインガイドライン）に準拠しています。一方、他のActivityIndicator、例えばCircularProgressIndicatorはマテリアルデザイン（GoogleのUIデザインガイドライン）に準拠しています。

以上を勉強して、CupertinoActivityIndicatorの概要から具体的な使用方法、さらに他のActivityIndicatorとの違いまで、しっかりと理解しました。

参考

• CupertinoActivityIndicator (Flutter Widget of the Week)
• CupertinoActivityIndicator class – cupertino library

ソース(main.dartにコピペして動作確認用)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino Activity Indicator Demo'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CupertinoActivityIndicator(),
            Container(height: 16), 
            CupertinoActivityIndicator(
                animating: false, radius: 30.0, color: Colors.amber),
            Container(height: 16), 
            CupertinoActivityIndicator.partiallyRevealed(progress: 0.7),
          ],
        ),
      ),
    );
  }
}