bouncing_loading_button 0.0.7
bouncing_loading_button: ^0.0.7 copied to clipboard
A customizable Flutter loading button with smooth animations and state transitions.
Loading Button #
A customizable Flutter widget that transforms a regular button into an interactive loading and completion button with smooth animations. This widget is ideal for use cases where actions require asynchronous operations, like API calls or form submissions.
Features #
- Animated loading indicator
- Bounce effect on completion
- Customizable button style (colors, size, border radius, etc.)
- Simple integration with minimal code
Demo #
Getting Started #
Installation #
Clone this repository or copy the loading_button.dart
file into your Flutter project.
Usage #
import 'package:flutter/material.dart';
import 'loading_button.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Loading Button Example',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isLoading = false;
bool _isDone = false;
Future<void> _handlePress() async {
setState(() {
_isLoading = true;
_isDone = false;
});
await Future.delayed(const Duration(seconds: 2));
setState(() {
_isLoading = false;
_isDone = true;
});
await Future.delayed(const Duration(seconds: 1));
setState(() {
_isDone = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Loading Button Example'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: Center(
child: LoadingButton(
label: 'Press Me',
isLoading: _isLoading,
isDone: _isDone,
onPressed: _handlePress,
style: LoadingButtonStyle(
backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
borderRadius: 16.0,
width: 150.0,
height: 50.0,
fontSize: 18.0,
elevation: 8.0,
),
),
),
);
}
}
Customization #
You can customize the LoadingButton
using the LoadingButtonStyle
class:
- borderRadius: Adjusts the roundness of the button corners.
- backgroundColor: Changes the button's background color.
- foregroundColor: Sets the text and icon color.
- width & height: Defines button size.
- fontSize: Adjusts the label text size.
- elevation: Adds shadow for a floating effect.
Example #
LoadingButtonStyle(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
borderRadius: 20.0,
width: 180.0,
height: 60.0,
fontSize: 20.0,
elevation: 10.0,
);
How It Works #
- Loading State: Displays an animated circular progress indicator.
- Done State: Shows a checkmark with a bounce animation.
- Idle State: Displays the button label.
Contributing #
Feel free to fork the repository, submit issues, or make pull requests.
License #
This project is licensed under the MIT License.