12-Aug-2022
.
Admin
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:
#Flutter