Flutter Circular Progress Indicator Example

Hello Friends,

In this example, you will learn Flutter Circular Progress Indicator Example. We will look at an example of the Flutter Circular Progress Indicator Example Tutorial. if you want to see an example of How to Use CircularProgressIndicator in Flutter then you are in the right place. you can understand the concept of How do You Make a Circular Progress Indicator in Flutter .

This Example shows you how to use the Circular Progress Indicator in a flutter. A circular progress indicator informs the user that the application is busy by displaying a small animating circular icon. It blocks the user from interacting with the application when it is busy. You will also learn how to customize & style the widget with different properties for example.

So, let's see the below solution with an output:

Step 1: Create Flutter Project

Follow along with the setup, you will be creating a Flutter app.

- $flutter create flutter_circular_progress_indicator_example

Navigate to the project directory:

- $cd flutter_circular_progress_indicator_example

Step 2: Main File

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            home: Loader(),
        );
    }
}

class Loader extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Circular Progress Indicator'),
                backgroundColor: Colors.blue,
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        CircularProgressIndicator(),
                        SizedBox(
                            height: 15,
                        ),
                    ],
                ),
            ),
        );
    }
}

Step 3: Run this Debug App

Outpute: