Open In App

Flutter - Loading Progress Indicator Button

Last Updated : 02 Aug, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Progress Indicator informs customers and users who are using the app about the ongoing Process, such as loading an app, submitting a form, or uploading a document online. Upon successful completion of the loading, we receive a success status.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Import dependencies

Import dependencies in the main.dart file.

import 'package:flutter/material.dart';

Step 3: Working with main.dart:

Add the boilerplate code below in main.dart in the main function, and create a basic structure with an MaterialApp.

Dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

Step 4: Code for Appbar

In this step, we have created an Appbar with a background color of green and text in white. Then we had initialized a variable of the bool type.

Dart
class _MyHomePageState extends State<MyHomePage> {

  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white),),
        centerTitle: true,
      ),

Step 5: Code for Body

In the body of our app, we created an elevated button. As we click on this button, we will see that the value of isLoading becomes true. In the button text "Loading..." appears with circularprogressindicator and with the help of the future.delayed, that loading will get stopped after 3 seconds, and then the value of isLoading will be turned to false.

Dart
body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.only(left: 10, right: 10),
              width: MediaQuery.of(context).size.width,
              height: 60,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                primary: Colors.green
                ),
                onPressed: () {
                setState(() {
                  isLoading = true;
                });
                Future.delayed(const Duration(seconds: 3), (){
                    setState(() {
                  isLoading = false;
                });
                }
                );
              }, child:  isLoading? Row(
                mainAxisAlignment: MainAxisAlignment.center,
                  
                // ignore: prefer_const_literals_to_create_immutables
                children: [
                 const Text('Loading...', style: TextStyle(fontSize: 20),),
                 const SizedBox(width: 10,),
                  const CircularProgressIndicator(color: Colors.white,),
                ],
              ) : const Text('Submit'),
              
              )
              )
          ],
        ),
      ),
    );
  }
}

Complete Source Code

main.dart:

main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      // created an Appbar with GeeksforGeeks written on it.
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white),),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.only(left: 10, right: 10),
              width: MediaQuery.of(context).size.width,
              height: 60,

              // elevated button created and given style
              // and decoration properties
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                primary: Colors.green
                ),
                onPressed: () {
                setState(() {
                  isLoading = true;
                });

                // we had used future delayed to stop loading after
                // 3 seconds and show text "submit" on the screen.
                Future.delayed(const Duration(seconds: 3), (){
                    setState(() {
                  isLoading = false;
                });
                }
                );
              }, child:  isLoading? Row(
                mainAxisAlignment: MainAxisAlignment.center,
                
                // as elevated button gets clicked we will see text"Loading..."
                // on the screen with circular progress indicator white in color.
                //as loading gets stopped "Submit" will be displayed
                children: const [
                  Text('Loading...', style: TextStyle(fontSize: 20),),
                  SizedBox(width: 10,),
                   CircularProgressIndicator(color: Colors.white,),
                ],
              ) : const Text('Submit'),
              
              )
              )
          ],
        ),
      ),
    );
  }
}

Output


Similar Reads