Nice Loading Button

Create an animated loading button using the nice_loading_button package with lots of properties. Nice Loading Button package helps you create beautiful loading animation in your buttons with a customized loader. Nice Loading Button is basically an ElevatedButton widget which means you can use the usual parameters with a few extra functionalities.

Demo

Usage

Nice Loading Button with CircularProgress Widget

LoadingButton(
 height: 50,
 borderRadius: 8,
 animate: true,
 color: Colors.indigo,
 width: MediaQuery.of(context).size.width * 0.45,
 loader: Container(
 padding: const EdgeInsets.all(10),
 width: 40,
 height: 40,
 child: const CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                ),
              ),
child: const Text("Login"),
              onTap: (startLoading, stopLoading, buttonState) async {
                if (buttonState == ButtonState.idle) {
                  startLoading();
                 // Do something here
                  await Future.delayed(const Duration(seconds: 5));
                  stopLoading();
                }
              },
            ),

Nice Loading Button with Custom Text

LoadingButton(
    height: 50,
    borderRadius: 8,
    roundLoadingShape: false,
    color: Colors.blueAccent,
    width: MediaQuery.of(context).size.width * 0.45,
    minWidth: MediaQuery.of(context).size.width * 0.30,
    loader: const Text("Loading..."),
    child: const Text("Login"),
    onTap: (startLoading, stopLoading, btnState) async {
        if (btnState == ButtonState.idle) {
            startLoading();
            // Do something here
            await Future.delayed(const Duration(seconds: 5));
            stopLoading();
        }
    },
),

Nice Loading Button with Custom Loading

LoadingButton(
    height: 50,
    borderRadius: 8,
    animate: true,
    color: Colors.deepOrange,
    width: MediaQuery.of(context).size.width * 0.45,
    loader: Container(
      padding: const EdgeInsets.all(10),
      child: const Center(
          child: SpinKitDoubleBounce(
            color: Colors.white,
          ),
      ),
    ),
    child: const Text("Login"),
    onTap: (startLoading, stopLoading, btnState) async {
        if (btnState == ButtonState.idle) {
            startLoading();
            // Do something here
            await Future.delayed(const Duration(seconds: 5));
            stopLoading();
        }
    },
),

Properties

• animate(Default false) : It uses width to animate while click on button
• roundLoadingShape(Default true) : It uses borderRadius to creates a round button while in Busy/Loading state
• width : Width of the button when in Idle state
• minWidth : Width of the button when in Busy/Loading state. Default value is equal to height in order to create a completely round loading button
• borderRadius : Border Radius of the button
• borderSide : BorderSide in order to give border color and width to the button
• child : Contents of button when in Idle state
• loader : Contents of button when in Busy/Loading state
• onTap : (startLoading, stopLoading, btnState) : Function that is called when you click on the button
• duration : Duration of the animation
• curve : Curve of animation
• reverseCurve : Curve of reverse animation

Social Links