[Widget]プログレスバーを使う(LinearProgressIndicator)

公開日: 2022-03-21更新日: 2022-03-21

動作環境: Flutter 2.8.1 Dart 2.15.1

Flutterでプログレスバーを使うにはLinearProgressIndicatorを使用します。

プログレスバーを使うと進捗状況をユーザーにわかりやすい形で表現することができます。
時間がかかる処理を進めているときや項目が多いフォームをユーザーが入力しているときなどに利用するとよいでしょう。

今回はボタンを押すことで進捗が進んでいくようにサンプルを作りました。

lib/main.dart

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  double _progressValue = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('サンプル'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(30)),
              child: LinearProgressIndicator(
                value: _progressValue,
                minHeight: 40,
                backgroundColor: Colors.grey,
                color: Colors.green.shade800,
              ),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              if (_progressValue == 1.0) {
                _progressValue = 0;
              } else {
                _progressValue += 0.2;
              }
            });
          },
        ),
      ),
    );
  }
}

「進捗」という状態を保持する必要があるため、StatefullWidgetを使用しています。
LinearProgressIndicatorを使っている部分、以下のコードを見てください。

lib/main.dart

            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(30)),
              child: LinearProgressIndicator(
                value: _progressValue,
                minHeight: 40,
                backgroundColor: Colors.grey,
                color: Colors.green.shade800,
              ),
            ),

28行目でLinearProgressIndicatorを使用しています。
value:に進捗状況を設定します。これは0.0から1.0の間で設定します。

1.0は100%ですね。
今回は_progressValueという変数を設定し、この変数の中身をボタンを押した時に変更するようにしています。

他にもminHeight:やbackgroundColor:、color:で見た目の変更をしています。
たとえば、80%まで進んだら色を変えるみたいなことも可能ですね。

26行目のようにClipRRectで囲むことでプログレスバーを角丸にしています。
これをしないときは、ただの長方形としてプログレスバーが表示されます。

ボタンを押したときの処理も確認しましょう。
以下のコードを見てください。

lib/main.dart

        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              if (_progressValue == 1.0) {
                _progressValue = 0;
              } else {
                _progressValue += 0.2;
              }
            });
          },
        ),

floatingActionButtonに設定したボタンを押すことで_progressValueの中身を変更するようにしています。
41行目で分岐を入れて、すでに100%に達しているときは0に戻すようにしています。

意外と簡単にできてしまいました。
見た目の変更も簡単にできてしまうので便利に使えると思います。

*「Run」を押すと実行できます。

もうひとつ、ボタンを押すと徐々に進捗が伸びていくパターンも作ってみました。
タイマーアプリなんかで役に立ちそうです。

*「Run」を押すと実行できます。

「Widget」のページ

サイトマップ

Flutterの記事

Dartの記事

お問い合わせ

執筆/運営

おかゆ

ツール系アプリの個人開発者です。
このサイトの感想や質問など、お気軽にメッセージください。