flutter notify from top of the screen. Flutter gives you the possiblity to create notifications with the help of the class Overlay. To animate these entering the screen from the top you can use the SlideTransition in combination with an AnimationController.
Here is an example:
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 79 80 81 82 83 84 85 86 87 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Home()); } } class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton.icon( icon: Icon(Icons.notifications_active), label: Text('Notify!'), onPressed: () { Navigator.of(context) .overlay .insert(OverlayEntry(builder: (BuildContext context) { return FunkyNotification(); })); }, ), ), ); } } class FunkyNotification extends StatefulWidget { @override State<StatefulWidget> createState() => FunkyNotificationState(); } class FunkyNotificationState extends State<FunkyNotification> with SingleTickerProviderStateMixin { AnimationController controller; Animation<Offset> position; @override void initState() { super.initState(); controller = AnimationController(vsync: this, duration: Duration(milliseconds: 750)); position = Tween<Offset>(begin: Offset(0.0, -4.0), end: Offset.zero) .animate( CurvedAnimation(parent: controller, curve: Curves.bounceInOut)); controller.forward(); } @override Widget build(BuildContext context) { return SafeArea( child: Material( color: Colors.transparent, child: Align( alignment: Alignment.topCenter, child: Padding( padding: EdgeInsets.only(top: 32.0), child: SlideTransition( position: position, child: Container( decoration: ShapeDecoration( color: Colors.deepPurple, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16.0))), child: Padding( padding: EdgeInsets.all(10.0), child: Text( 'Notification!', style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold), ), ), ), ), ), ), ), ); } } |
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.
