flutter – CircularProgressIndicator value

main.dart

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

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.indigo),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample> {
  double _progress = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFEDEAE0),
      appBar: AppBar(
          title: const Text("Flutter - CircularProgressIndicator Value")
      ),
      body: bodyContent(),
    );
  }

  void startTimer() {
    Timer.periodic(
        const Duration(seconds: 1),(Timer timer) => setState(() {
      if (_progress == 1) {
        timer.cancel();
      } else {
        _progress += 0.1;
      }
    },
    ));
  }

  bodyContent() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 200,
            height: 200,
            child:CircularProgressIndicator(
              value: _progress,
              strokeWidth: 5,
            ),
          ),
          Padding(
              padding: const EdgeInsets.only(top: 10),
              child: ElevatedButton(
                  onPressed: () {
                    _progress = 0;
                    startTimer();
                  },
                  child: const Text("Start Work")
              )
          ),
        ],
      ),
    );
  }
}

More flutter tutorials

• flutter – ListView remove item
• flutter – Container shape
• flutter – Container shadow only bottom
• flutter – Container background image
• flutter – How to change OutlinedButton border color
• flutter – How to remove underline from DropdownButton
• flutter – DropdownButton selected text color
• flutter – InkWell rounded
• flutter – Stack center
• flutter – Stack fit
• flutter – LinearProgressIndicator example
• flutter – LinearProgressIndicator width
• flutter – CircularProgressIndicator example
• flutter – CircularProgressIndicator size
• flutter – CircularProgressIndicator color