Animate Dialogs In Flutter
Flutter offers extraordinary help for animations. Nonetheless, this isn’t true with Dialogs. The default animations in Flutter’s dialogs are straightforward and foreordained due to this we really want to do a ton of work to animate dialogs.
The dialog is a kind of widget that comes on the window or the screen which contains any basic data or can request any choice. At the point when a dialog put away is popped the wide range of various functions get disabled until you close the dialog box or give an answer. We utilize an animated dialog box for straightforward pop-up messages which are shown.
In this blog, we will explore the Animate Dialogs In Flutter. We will see how to implement an animate dialog demo program and we are going to learn how to animate dialogs without using any third-party package in your flutter applications.
Table Of Contents::
Introduction:
A dialog resembles a popup window to give a few alternatives to users(options like acknowledging/decay). Basic Alert Dialog won’t be helpful for each necessity. We will animate dialog without using any third-party plugin.
Demo Module :
The above demo output shows how to animate dialogs in flutter and shows how to animate dialogs will work without using any third-party plugin in your flutter applications. We will show a user when clicking on the button and then, show animate dialogs on your screens. It will be shown on your device.
Constructor:
To utilize showGeneralDialog, you need to call the constructor underneath:
Future<T?> showGeneralDialog<T extends Object?>({
required BuildContext context,
required RoutePageBuilder pageBuilder,
bool barrierDismissible = false,
String? barrierLabel,
Color barrierColor = const Color(0x80000000),
Duration transitionDuration = const Duration(milliseconds: 200),
RouteTransitionsBuilder? transitionBuilder,
bool useRootNavigator = true,
RouteSettings? routeSettings,
Offset? anchorPoint,
})
All fields marked with @required must not be empty in the above Constructor.
Parameters:
There are some parameters of showGeneralDialog are:
- > barrierDismissible: This parameter is used to define whether dialog may be dismissible or not
- > barrierColor: This parameter is used for the Background color of dialog.
- > transitionDuration: This parameter is used Duration of animation when the dialog appears and disappears. Also, used to determine how long it takes for the route to arrive on or leave off the screen. This argument defaults to 200 milliseconds.
- > transitionBuilder: This parameter is used to define how the route arrives on and leaves off the screen. By default, the transition is a linear fade off the page’s contents.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a MyHomePage class. In this class, we will create two ElevatedButton. First, we will create a Rotate Dialog. We will create a button with style and add the text ‘Rotate Dialog’. Also, the onPressed function. In this function, we will add _rotateDialog() method. We will below define this method with the code.
SizedBox(
height: 45,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.teal,
),
onPressed: () => _rotateDialog(),
child: const Text('Rotate Dialog',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold))),
),
Now we will deeply define _rotateDialog() method:
In this method, we will add the showGeneralDialog() function. Inside the function, we will add context, pageBuilder, transitionBuilder, and transitionDuration. In transitionBuilder, we will return Transform.rotate() method. In this method, we will add angle and its child we will add the _dialog(ctx) widget method.
void _rotateDialog() {
showGeneralDialog(
context: context,
pageBuilder: (ctx, a1, a2) {
return Container();
},
transitionBuilder: (ctx, a1, a2, child) {
return Transform.rotate(
angle: math.radians(a1.value * 360),
child: _dialog(ctx),
);
},
transitionDuration: const Duration(milliseconds: 300),
);
}
In this _dialog() method. This method was common for rotate and scale dialog. This will return an AlertDialog() widget. In this widget, we will add title, content, and actions: <Widget>.
Widget _dialog(BuildContext context) {
return AlertDialog(
title: const Text("Flutter Dev's"),
content: const Text("FlutterDevs specializes in creating cost-effective "
"and efficient applications with our perfectly crafted, creative and "
"leading-edge flutter app development solutions for customers all around "
"the globe."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
"Okay",
style: TextStyle(color: Colors.red, fontSize: 17),
))
],
);
}
When we run the application, we ought to get the screen’s output like the underneath screen video.
Next, we will create a Scale Dialog. We will create a button with style and add the text ‘Scale Dialog’. Also, the onPressed function. In this function, we will add _scaleDialog() method. We will below define this method with the code.
SizedBox(
height: 45,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.teal,
),
onPressed: () => _scaleDialog(),
child: const Text('Scale Dialog',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold))),
),
Now we will deeply define _scaleDialog() method:
In this method, we will add the showGeneralDialog() function. Inside the function, we will add context, pageBuilder, transitionBuilder, and transitionDuration. In transitionBuilder, we will return Transform.scale() method. In this method, we will add a curve and its child we will add the _dialog(ctx) widget method.
void _scaleDialog() {
showGeneralDialog(
context: context,
pageBuilder: (ctx, a1, a2) {
return Container();
},
transitionBuilder: (ctx, a1, a2, child) {
var curve = Curves.easeInOut.transform(a1.value);
return Transform.scale(
scale: curve,
child: _dialog(ctx),
);
},
transitionDuration: const Duration(milliseconds: 300),
);
}
When we run the application, we ought to get the screen’s output like the underneath screen video.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_animate_dialogs_demo/splash_screen.dart';
import 'package:vector_math/vector_math.dart' as math;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget _dialog(BuildContext context) {
return AlertDialog(
title: const Text("Flutter Dev's"),
content: const Text("FlutterDevs specializes in creating cost-effective "
"and efficient applications with our perfectly crafted, creative and "
"leading-edge flutter app development solutions for customers all around "
"the globe."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
"Okay",
style: TextStyle(color: Colors.red, fontSize: 17),
))
],
);
}
void _rotateDialog() {
showGeneralDialog(
context: context,
pageBuilder: (ctx, a1, a2) {
return Container();
},
transitionBuilder: (ctx, a1, a2, child) {
return Transform.rotate(
angle: math.radians(a1.value * 360),
child: _dialog(ctx),
);
},
transitionDuration: const Duration(milliseconds: 300),
);
}
void _scaleDialog() {
showGeneralDialog(
context: context,
pageBuilder: (ctx, a1, a2) {
return Container();
},
transitionBuilder: (ctx, a1, a2, child) {
var curve = Curves.easeInOut.transform(a1.value);
return Transform.scale(
scale: curve,
child: _dialog(ctx),
);
},
transitionDuration: const Duration(milliseconds: 300),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
automaticallyImplyLeading: false,
title: const Text('Flutter Animate Dialogs Demo'),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Image(
image: AssetImage("assets/logo.png"),
height: 150,
),
const SizedBox(
height: 50,
),
SizedBox(
height: 45,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.teal,
),
onPressed: () => _rotateDialog(),
child: const Text('Rotate Dialog',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold))),
),
const SizedBox(
height: 20,
),
SizedBox(
height: 45,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.teal,
),
onPressed: () => _scaleDialog(),
child: const Text('Scale Dialog',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold))),
),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Conclusion:
In the article, I have explained the Animate Dialog basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Animate Dialog On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Animate Dialog in your flutter projects. We will show you what the Introduction is?. What are the construction and parameters of Animate Dialog, make a demo program for working with Animate Dialog without using any third-party plugin in your flutter applications. 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.
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.
