Flutter custom animated dialog. In general it is better to show dialogs with the showDialog function, because the closing and gesture are handled by Flutter. I have updated the example, it is now running with showDialog and you are able to close the dialog by tapping on the background.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(title: 'Flutter Demo', theme: ThemeData(), home: Page()); } } class Page extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton.icon( onPressed: () { showDialog( context: context, builder: (_) => FunkyOverlay(), ); }, icon: Icon(Icons.message), label: Text("PopUp!")), ), ); } } class FunkyOverlay extends StatefulWidget { @override State<StatefulWidget> createState() => FunkyOverlayState(); } class FunkyOverlayState extends State<FunkyOverlay> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> scaleAnimation; @override void initState() { super.initState(); controller = AnimationController(vsync: this, duration: Duration(milliseconds: 450)); scaleAnimation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut); controller.addListener(() { setState(() {}); }); controller.forward(); } @override Widget build(BuildContext context) { return Center( child: Material( color: Colors.transparent, child: ScaleTransition( scale: scaleAnimation, child: Container( decoration: ShapeDecoration( color: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15.0))), child: Padding( padding: const EdgeInsets.all(50.0), child: Text("Well hello there!"), ), ), ), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
