How to Show Circular Progress Indicator in Flutter

In the previous blog post, I wrote about how to show linear progress indicator in Flutter. Here, in this blog post, let’s check how to show indeterminate circular progress indicator in your Flutter app.

A progress indicator is really helpful as it lets the user some processes is ongoing inside the mobile app. In the following Flutter progress indicator example, I am showing an indeterminant circular progress indicator with cyan color as well as a stroke width of 5.

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Circular Progress Indicator Example'),
        ),
        body: Center(
      child: Body()
    ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      backgroundColor: Colors.cyan,
      strokeWidth: 5,);
  }
}

The output of the flutter circular progress indicator is as given below: