animation_loading_button 0.0.4
animation_loading_button: ^0.0.4 copied to clipboard
is a Flutter package with a simple implementation of an animated loading button, complete with success animations.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'animation_loading_button.dart';
import 'loading/enum_indicator.dart';
import 'loading/loading_indicator.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
onButtonPressed() async {
await Future.delayed(const Duration(milliseconds: 3000), () => 42);
// After [onPressed], it will trigger animation running backwards, from end to beginning
return () {};
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const SizedBox(
height: 10,
),
const Text(
'Button style:',
style: CustomTextStyle.nameOfTextStyle,
textAlign: TextAlign.start,
),
const SizedBox(
height: 10,
),
Row(
children: [
const Expanded(
flex: 5,
child: Text(
'Type.color: ',
style: CustomTextStyle.buttonOfTextStyle,
),
),
Expanded(
flex: 4,
child: LoadingButton(
type: LoadingButtonType.color,
// Content inside the button when the button state is idle.
idleStateWidget: const Text(
'Button',
style: TextStyle(
color: Colors.black,
),
),
useEqualLoadingStateWidgetDimension: true,
// Whether or not to animate the width of the button. Default is `true`.
// If this is set to `false`, you might want to set the `useEqualLoadingStateWidgetDimension` parameter to `true`.
useAnimation: true,
loadingType: LoadingType.circularProgressIndicator,
// If you want a fullwidth size, set this to double.infinity
width: 150.0,
height: 40.0,
buttonColor: Colors.blueAccent,
loadingColor: Colors.white,
onPressed: onButtonPressed,
),
),
const Expanded(
flex: 3,
child: SizedBox(
width: 10,
)),
],
),
const SizedBox(
height: 10,
),
Row(
children: [
const Expanded(
flex: 5,
child: Text(
'Type.transparent: ',
style: CustomTextStyle.buttonOfTextStyle,
),
),
Expanded(
flex: 4,
child: LoadingButton(
type: LoadingButtonType.transparent,
// Content inside the button when the button state is idle.
idleStateWidget: const Text(
'Button',
style: TextStyle(
color: Colors.black,
),
),
useEqualLoadingStateWidgetDimension: true,
// Whether or not to animate the width of the button. Default is `true`.
// If this is set to `false`, you might want to set the `useEqualLoadingStateWidgetDimension` parameter to `true`.
useAnimation: true,
loadingType: LoadingType.circularProgressIndicator,
// If you want a fullwidth size, set this to double.infinity
width: 150.0,
height: 40.0,
buttonColor: Colors.blueAccent,
loadingColor: Colors.black,
onPressed: onButtonPressed,
),
),
const Expanded(
flex: 3,
child: SizedBox(
width: 10,
)),
],
),
const SizedBox(
height: 10,
),
Row(
children: [
const Expanded(
flex: 5,
child: Text(
'Type.text: ',
style: CustomTextStyle.buttonOfTextStyle,
),
),
Expanded(
flex: 4,
child: LoadingButton(
type: LoadingButtonType.text,
// Content inside the button when the button state is idle.
idleStateWidget: const Text(
'Button',
style: TextStyle(
color: Colors.black,
),
),
useEqualLoadingStateWidgetDimension: true,
// Whether or not to animate the width of the button. Default is `true`.
// If this is set to `false`, you might want to set the `useEqualLoadingStateWidgetDimension` parameter to `true`.
useAnimation: true,
loadingType: LoadingType.circularProgressIndicator,
// If you want a fullwidth size, set this to double.infinity
width: 150.0,
height: 30.0,
buttonColor: Colors.blueAccent,
loadingColor: Colors.black,
onPressed: onButtonPressed,
),
),
const Expanded(
flex: 3,
child: SizedBox(
width: 10,
)),
],
),
const SizedBox(
height: 20,
),
const Text(
'Loading Type:',
style: CustomTextStyle.nameOfTextStyle,
textAlign: TextAlign.start,
),
_bhallMultiple(),
_ballRotate(),
circularProgressIndicator(),
cupertinoActivityIndicator(),
ballPulse(),
const SizedBox(
height: 20,
),
const Text(
'Example:',
style: CustomTextStyle.nameOfTextStyle,
textAlign: TextAlign.start,
),
const SizedBox(
height: 10,
),
LoadingButton(
type: LoadingButtonType.transparent,
// Content inside the button when the button state is idle.
idleStateWidget: const Text(
'Button',
style: TextStyle(
color: Colors.black,
),
),
useEqualLoadingStateWidgetDimension: true,
// Whether or not to animate the width of the button. Default is `true`.
// If this is set to `false`, you might want to set the `useEqualLoadingStateWidgetDimension` parameter to `true`.
useAnimation: true,
loadingType: LoadingType.ballMultipleIndicator,
// If you want a fullwidth size, set this to double.infinity
width: 150.0,
height: 40.0,
buttonColor: Colors.black,
loadingColor: Colors.black,
onPressed: onButtonPressed,
),
],
),
),
);
}
// circularProgressIndicator,
// cupertinoActivityIndicator,
// ballPulseIndicator,
// ballMultipleIndicator,
// ballRotateIndicator
_bhallMultiple() {
return const Row(
children: [
Text(
'1. BallMultipleIndicator:',
style: CustomTextStyle.loadingOfStyle,
textAlign: TextAlign.start,
),
SizedBox(
height: 50,
width: 50,
child: LoadingIndicator(
indicatorType: Indicator.ballMultiple,
colors: [
Colors.black,
],
),
),
],
);
}
_ballRotate() {
return const Row(
children: [
Text(
'2. BallRotateIndicator:',
style: CustomTextStyle.loadingOfStyle,
textAlign: TextAlign.start,
),
SizedBox(
height: 50,
width: 50,
child: LoadingIndicator(
indicatorType: Indicator.ballRotate,
colors: [
Colors.black,
],
),
),
],
);
}
circularProgressIndicator() {
return const Row(
children: [
Text(
'3. CircularProgressIndicator:',
style: CustomTextStyle.loadingOfStyle,
textAlign: TextAlign.start,
),
SizedBox(
width: 5,
),
SizedBox(
height: 30,
width: 30,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Colors.black,
),
strokeWidth: 3.0,
),
),
],
);
}
cupertinoActivityIndicator() {
return const Row(
children: [
Text(
'4. cupertinoActivityIndicator:',
style: CustomTextStyle.loadingOfStyle,
textAlign: TextAlign.start,
),
SizedBox(
width: 5,
),
SizedBox(
height: 30,
width: 30,
child: CupertinoActivityIndicator(
color: Colors.black,
),
),
],
);
}
ballPulse() {
return const Row(
children: [
Text(
'5. BallPulse:',
style: CustomTextStyle.loadingOfStyle,
textAlign: TextAlign.start,
),
SizedBox(
width: 5,
),
SizedBox(
height: 30,
width: 30,
child: LoadingIndicator(
indicatorType: Indicator.ballPulse,
colors: [
Colors.black,
],
)),
],
);
}
}
class CustomTextStyle {
static const TextStyle nameOfTextStyle = TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.bold,
);
static const TextStyle buttonOfTextStyle = TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.normal,
);
static const TextStyle loadingOfStyle = TextStyle(
fontSize: 12,
color: Colors.black,
fontWeight: FontWeight.normal,
);
}