nice_loading_button 0.0.1

An animated loading button package that allows you to create beautiful loadding button with lots of customized properties.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:nice_loading_button/nice_loading_button.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Nice Loading Button with CircularProgress widget
            LoadingButton(
              height: 50,
              borderRadius: 8,
              animate: true,
              color: Colors.indigo,
              width: MediaQuery.of(context).size.width * 0.44,
              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();
                }
              },
            ),
            const SizedBox(height: 50),
            // Nice Loading Button with custom Text
            LoadingButton(
              height: 50,
              borderRadius: 8,
              roundLoadingShape: false,
              color: Colors.red,
              width: MediaQuery.of(context).size.width * 0.44,
              minWidth: MediaQuery.of(context).size.width * 0.29,
              loader: const Text("Logging in..."),
              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();
                }
              },
            ),
            const SizedBox(height: 50),
            // Nice Loading Button with Custom Loading
            LoadingButton(
              height: 50,
              borderRadius: 8,
              animate: true,
              color: Colors.cyan,
              width: MediaQuery.of(context).size.width * 0.44,
              loader: Container(
                padding: const EdgeInsets.all(10),
                child: const Center(
                  child: SpinKitDoubleBounce(
                    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();
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

copied to clipboard