How To Implement Flutter CircularProgressIndicator Center Screen – Easy Flutter Guide

flutter circularprogressindicator center screen

In this tutorial, we’ll learn how to easily implement Flutter CircularProgressIndicator center screen by using practical Flutter code example.

Introduction: Flutter CircularProgressIndicator Center Screen

As the name suggests, it specifies positioning the Flutter CircularProgressIndicator widget in the center of phone’s screen.

Implementing Flutter CircularProgressIndicator Center Screen (Easy Example Code)

For that, we first have to define a simple Flutter circular progress indicator widget. After that, we’ve to wrap it with Flutter center widget. This widget is used to center its child widget. See below code:

Center(
        child: Center(
        child: CircularProgressIndicator(),
      ))
flutter circularprogressindicator center screen
As you can see here that the circular progress indicator is showing in the center of screen. The center widget is used to center its child widget by using its parent’s center position.
If the circular progress indicator widget is passed directly to the body constructor of Flutter scaffold widget then what will be its position. See below code for that:
Scaffold(
      body: CircularProgressIndicator()
    )
flutter circularprogressindicator center screen
As you can see in the above image that its showing in the top left of the screen.
Do visit my other posts on the customization of Flutter CircularProgressIndicator stroke width and color.
The complete source code is give below in which Flutter CircularProgressIndicator center screen is implemented.

Flutter CircularProgressIndicator Center Screen Implementation Source Code

flutter circularprogressindicator center screen

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    ));
  }
}

Conclusion

To conclude this tutorial, hope you now have a detailed practical knowledge of how to implement Flutter CircularProgressIndicator center screen. I’ll be very happy to receive your feedback regarding this post.

I’d also welcome you to visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published.