Bouncing Button Animation In Flutter
Animations assume a significant function in upgrading the general user experience of your application from the visual input, motion, and up to the animations you can actually envision!. Much the same as some other items coordinated into an application, animations must be a functional element instead of only a regular stylistic theme.
Utilizing the traditional frameworks, you would typically need to compose complex animation controllers and designs where you set the timings, tweens, and advances.
In this blog, We will be going to explore Bouncing Button Animation In Flutter and show a demo of how to make a bouncing button animation in your flutter applications.
Table Of Contents::
What is Flutter :
Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time.
- If you want to explore more about Flutter, please visit Flutter’s official website to get more information.
Flutter — Beautiful native apps in record time
Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully-customizable widgets to build…flutter.dev
What is Animation?
An animation comprises of estimation (of type T) along with status. The status demonstrates whether the animation is thoughtfully running from start to finish or from the end back to the start, despite the fact that the real estimation of the animation probably won’t change monotonically. Animations additionally let different items tune in for changes to either their worth or their status. These callbacks are called during the “animation” period of the pipeline, only before rebuilding widgets.
When it comes to creating a good user experience for your application, including all around made and liquid animations, are significant. They function as visual input for user activities and can likewise give the importance of connection and consolation.
Animating buttons are what this article is about; explicitly, we’ll manufacture a small bouncing animation that is set off when the user clicks a button.
Demo module::
Code Implementation :
Create a new dart file called bouncing_button.dart inside the lib folder.
On this page, we will create a container and a text. When the user taps the conatiner, then that bouncing animation will show it in your devices.
The button layout is based on a container with a text widget in its center. Let’s declare the _animatedButton() widget.
Widget _animatedButton() {
return Container(
height: 70,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
boxShadow: [
BoxShadow(
color: Color(0x80000000),
blurRadius: 12.0,
offset: Offset(0.0, 5.0),
),
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xff33ccff),
Color(0xffff99cc),
],
)),
child: Center(
child: Text(
'Press',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
);
}
Let’s add animation
We should utilize the setState() and dispose() function and implement SingleTickerProviderStateMixin and characterize the main two properties, which we’ll have to make the animation.
It’s currently an ideal opportunity to initialize our _controller by overriding initState() and dispose of it by overriding the dispose function.
double _scale;
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(
milliseconds: 500,
),
lowerBound: 0.0,
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
super.initState();
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
Next, we’re characterizing two functions, one for when the button is tapped down, and the other for when the button is released, the previous will advise our controller to go ahead, and the last to go backward.
At long last, in our build function, we set our scale variable and let a GestureDetector handle the top-down and tapUp properties and afterward scale utilizing the Transform Widget.
Code File :
import 'package:flutter/material.dart';
class BouncingButton extends StatefulWidget {
@override
_BouncingButtonState createState() => _BouncingButtonState();
}
class _BouncingButtonState extends State<BouncingButton> with SingleTickerProviderStateMixin {
double _scale;
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(
milliseconds: 500,
),
lowerBound: 0.0,
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
super.initState();
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
_scale = 1 - _controller.value;
return Scaffold(
appBar: AppBar(
title: Text("Flutter Bouncing Button Animation Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Press the Below Button',style: TextStyle(color: Colors.grey[400],fontSize: 20.0),),
SizedBox(
height: 20.0,
),
Center(
child: GestureDetector(
onTapDown: _tapDown,
onTapUp: _tapUp,
child: Transform.scale(
scale: _scale,
child: _animatedButton(),
),
),
),
],
),
);
}
Widget _animatedButton() {
return Container(
height: 70,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
boxShadow: [
BoxShadow(
color: Color(0x80000000),
blurRadius: 12.0,
offset: Offset(0.0, 5.0),
),
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xff33ccff),
Color(0xffff99cc),
],
)),
child: Center(
child: Text(
'Press',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
);
}
void _tapDown(TapDownDetails details) {
_controller.forward();
}
void _tapUp(TapUpDetails details) {
_controller.reverse();
}
}
Conclusion :
In the article, I have explained the basic architecture of Bouncing Button Animation; you can modify this code according to your choice, and this was a small introduction of Bouncing Button AnimationIn Flutter from my side and its working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Bouncing Button Animation In Flutter in your flutter projects. This is a demo example of Bouncing Button Animation in a flutter, and how to animation will work when taps the button. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Bouncing Button Animation Demo:
flutter-devs/flutter_bouncing_button_animation_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
