Flutter – Loading Progress Indicator Button

In this article, we will learn about the Loading Progress Indicator Button in Flutter.

What is Loading Progress Indicator Button?

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. As the loading gets completed successfully we get a success status.

Let’s implement  Loading Progress Indicator Button – 

Implementation:

Follow the below s6es to implement Loading Progress Indicator Button in Flutter:

Step 1: Created a new project and then we had created a stateful widget. We had created a stateful widget because our app is not static and every time we build or run the app new activity will take place.

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 2: In this step, we have created an Appbar with background color as green and text as white in color. 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,
      ),

Step3 –  In the body of our app we had created an elevated button. The elevated button is inside the container and we have given padding, width and height to our elevated button. We had also given color property to our button as well.  Now as we click on this button we will see that the value of isLoading becomes true. In the button text “Loading…”appear with circularprogressindicator and with the help of future.delayed that loading will get stopped after 3 seconds and then the value of isLoading will be turned to false. We had used main axis alignment to center, to keep our loading button in center. As loading gets completed in 3 seconds we will see the text “Submit” got displayed on the screen.

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'),

              )
              )
          ],
        ),
      ),
    );
  }
}

Full source code:

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: