Flutter Progress Bar with example |Linear progress | Circular progress

In Flutter, you can use the LinearProgressIndicator or CircularProgressIndicator widgets to create a progress bar.

Here’s an example of both types of progress indicators:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              LinearProgressBarExample(),
              SizedBox(height: 20),
              CircularProgressBarExample(),
            ],
          ),
        ),
      ),
    );
  }
}

class LinearProgressBarExample extends StatefulWidget {
  @override
  _LinearProgressBarExampleState createState() =>
      _LinearProgressBarExampleState();
}

class _LinearProgressBarExampleState extends State<LinearProgressBarExample> {
  double _progressValue = 0.4;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Linear Progress Bar Example'),
        SizedBox(height: 10),
        LinearProgressIndicator(
          value: _progressValue,
        ),
        SizedBox(height: 10),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _progressValue += 0.1;
              if (_progressValue > 1.0) {
                _progressValue = 0.0;
              }
            });
          },
          child: Text('Increase Progress'),
        ),
      ],
    );
  }
}

class CircularProgressBarExample extends StatefulWidget {
  @override
  _CircularProgressBarExampleState createState() =>
      _CircularProgressBarExampleState();
}

class _CircularProgressBarExampleState
    extends State<CircularProgressBarExample> {
  double _progressValue = 0.4;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Circular Progress Bar Example'),
        SizedBox(height: 10),
        CircularProgressIndicator(
          value: _progressValue,
        ),
        SizedBox(height: 10),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _progressValue += 0.1;
              if (_progressValue > 1.0) {
                _progressValue = 0.0;
              }
            });
          },
          child: Text('Increase Progress'),
        ),
      ],
    );
  }
}