[Flutter]インジケータ(indicator)を表示するには？

[Flutter]インジケータを表示するには？

Flutter

2021.12.16

どうも、ちょげ(@chogetarou)です。

インジケータを表示する方法を紹介します。

方法
1. CircularProgressIndicator
2. LinearProgressIndicator
まとめ

方法

インジケータを表示するには、次の２つのウェジェットを使います。

CircularProgressIndicator : くるくる回る円
LinearProgressIndicator : 直線の棒

CircularProgressIndicator

CircularProgressIndicatorは、円のインジケータを表示するウェジェットです。

使い方は、簡単でCircularProgressIndicatorをインジケータを表示したい場所に配置するだけです。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }

LinearProgressIndicator

LinearProgressIndicatorは、直線の棒のインジケータを表示するウェジェットです。

インジケータを表示したい場所にLinearProgressIndicatorを配置することで使うことが出来ます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LinearProgressIndicator(),
      ),
    );
  }