Flutterの今週のWidgetをやってみた その3 LinearProgressIndicator

こんにちは、株式会社PentagonでFlutterを使ったアプリ開発をしているd-ariakeです。
https://pentagon.tokyo
今日は「Flutter Widget of the Week」という動画でLinearProgressIndicatorについて学んでみたのでまとめてみます!
動画によると、横長の進捗を表すバーはLinearProgressIndicatorを使えばいいみたいです。valueパラメタに0.0から1.0までの値を与えることで割合を指定します。↓ 私も今回勉強した知識を使って簡単なサンプルを作ってみました!

import 'package:flutter/material.dart';

void main() {
 runApp(
   MaterialApp(
     title: 'TestApp',
     theme: ThemeData(primarySwatch: Colors.blue),
     home: MyPage(),
   ),
 );
}

/// 参考: https://youtu.be/O-rhXZLtpv0
class MyPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => MyPageState();
}

class MyPageState extends State<MyPage> {
 static const maxPower = 100;
 int power = 0;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('TestApp')),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text(
             power != maxPower ? 'パワーを貯めよう!' : 'パワーが貯まった!',
             style: const TextStyle(fontSize: 20),
           ),
           Padding(
             padding: const EdgeInsets.all(32),
             child: LinearProgressIndicator(value: power / maxPower),
           ),
           ElevatedButton(
             onPressed: power != maxPower ? onAddButtonPressed : null,
             child: const Text('パワーを貯める!'),
           ),
           ElevatedButton(
             onPressed: onResetButtonPressed,
             child: const Text('リセット!'),
           ),
         ],
       ),
     ),
   );
 }

 void onAddButtonPressed() {
   setState(() {
     power++;
   });
 }

 void onResetButtonPressed() {
   setState(() {
     power = 0;
   });
 }
}

ボタンを押すとパワーが貯まります。パワーが貯まるごとにバーの度合いが増えていきます。たくさんボタンを押しましょう!みなさんも是非LinearProgressIndicatorを使ってみてください!