How to create a Button with Loading Spinner?

How to create a Button with Loading Spinner

In this guide, we will discuss how to create a Button with Loading Spinner in a flutter. For this, we should know some basic information about what a Loading Progress Indicator in flutter is. Progress Indicator informs 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. The progress button is a normal button but when you click on it, It will show the progress so that the user will have an idea that some process is running.

Also read: Lottie Animations In Flutter

Let’s take an example of how we can create a Button with Loading Spinner in our flutter application.

import 'package:flutter/material.dart';

class LoadingSpinnerButtonScreen extends StatefulWidget {
  const LoadingSpinnerButtonScreen({Key? key}) : super(key: key);

  @override
  State<LoadingSpinnerButtonScreen> createState() =>
      _LoadingSpinnerButtonScreenState();
}

class _LoadingSpinnerButtonScreenState
    extends State<LoadingSpinnerButtonScreen> {
  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Loading Spinner Button'),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(16),
            child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                    textStyle: const TextStyle(fontSize: 20),
                    minimumSize: const Size.fromHeight(72),
                    shape: const StadiumBorder()),
                onPressed: () async {
                  setState(() {
                    isLoading = true;
                  });
                  await Future.delayed(const Duration(seconds: 2), () {
                    setState(() {
                      isLoading = false;
                    });
                  });
                },
                child: isLoading
                    ? Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          CircularProgressIndicator(
                            color: Colors.white,
                          ),
                          SizedBox(
                            width: 10,
                          ),
                          Text(
                            'Loading...',
                            style: TextStyle(fontSize: 20),
                          ),
                        ],
                      )
                    : const Text('Login')),
          )
        ],
      ),
    );
  }
}

In the above example, we created an elevated button in the body. The elevated button is inside the container and we have given paddingwidth, 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 2 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 the center. As loading gets completed in 3 seconds we will see the text “Login” got displayed on the screen.

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Thank you for reading the Guide about how to How to create a Button with Loading Spinner in a flutter.