DEV Community

Cover image for Flutter Circular Progress Bar
Aadarsh Kunwar
Aadarsh Kunwar

Posted on

1

Flutter Circular Progress Bar

To create a circular progress bar in Flutter, you can use the CircularProgressIndicator widget. Below is a simple example of how to implement it:
Basic Circular Progress Bar

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('Circular Progress Bar Example'),
        ),
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

Customized Circular Progress Bar
You can customize the progress bar with different colors, thickness, and more:

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('Circular Progress Bar Example'),
        ),
        body: Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            backgroundColor: Colors.grey[300],
            strokeWidth: 8.0,
          ),
        ),
      ),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

Circular Progress Bar with Percentage
If you want to show a circular progress bar that displays progress (e.g., a percentage):

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double progressValue = 0.0;

  void updateProgress() {
    setState(() {
      progressValue += 0.1;
      if (progressValue > 1.0) {
        progressValue = 0.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circular Progress Bar with Percentage'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircularProgressIndicator(
                value: progressValue,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                backgroundColor: Colors.grey[300],
                strokeWidth: 8.0,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: updateProgress,
                child: Text('Increase Progress'),
              ),
              SizedBox(height: 20),
              Text('${(progressValue * 100).round()}%'),
            ],
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • CircularProgressIndicator(): A widget that displays a circular progress indicator.
  • valueColor: Specifies the color of the progress indicator.
  • backgroundColor: Specifies the color of the track behind the progress indicator.
  • strokeWidth: Sets the thickness of the progress indicator's stroke.
  • value: If null, the progress indicator shows an indeterminate spinner. If a value is provided, it represents the completion percentage of the task, where 1.0 means 100%.

Sentry blog image

The countdown to March 31 is on.

Make the switch from app center suck less with Sentry.

Read more

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools