Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In this tutorial, we will show how to display application notifications in the Flutter application. We will add [overlay_support] (https://pub.dev/packages/overlay_support) packageCopy the code

Overlay_support: ^ 1.0.0

To use the Overlay feature, we must wrap the Material application in the 'OverlaySupport' widget.Copy the code

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return OverlaySupport( child: MaterialApp( title: ‘Flutter Demo’, home: Scaffold(), ), ); }}

We will show the changes to notification coverage. The library can also make more toast, which you can enter. We will cover: 1. Basic notifications that close automatically 1. Fixed notifications with a close button 1. Message style customization informs us that we will write all of our code in the onPressed callback in the scaffold's FloatingActionButton, so set it as well.Copy the code

Widget build(BuildContext context) {    return OverlaySupport(     ..      home: Scaffold(          floatingActionButton: FloatingActionButton(          onPressed: () {            // notification code will go here         },         )     ),   ); }

We'll start with basic notifications. Purple notification with some textCopy the code

 showSimpleNotification(    Text(“Subscribe to FilledStacks”),    background: Colors.purple, );

! [notice] basic (https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecc858ba530541629e456e4304277e80~tplv-k3u1fbpfcp-zoom-1.image) In order to preserve notifications without automatically closing them, we set 'autoDismiss' to false. We don't want notifications to stay there, so we'll build a trailing button that users can click to turn off.Copy the code

showSimpleNotification( Text(“Subscribe to FilledStacks”), background: Colors.purple, autoDismiss: false, trailing: Builder(builder: (context) { return FlatButton( textColor: Colors.yellow, onPressed: () { OverlaySupportEntry.of(context).dismiss(); }, child: Text(‘Dismiss’)); }));

! [notice] fixed (https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aafd8a73b5ab4a069ee81c2925976f7a~tplv-k3u1fbpfcp-zoom-1.image) To display some custom UI, you can use the 'showOverlayNotification' function. It requires a builder as the first positional argument. We're going to return a Card with some margins, and we're going to wrap the contents of the Card in a SafeArea, because it's going to show up at the top of the screen, and the notch might interfere. The content of the notification will be a basic ListTile with all the property sets.Copy the code

showOverlayNotification((context) { return Card( margin: const EdgeInsets.symmetric(horizontal: 4), child: SafeArea( child: ListTile( leading: SizedBox.fromSize( size: const Size(40, 40), child: ClipOval( child: Container( color: Colors.black, ))), title: Text(‘FilledStacks’), subtitle: Text(‘Thanks for checking out my tutorial’), trailing: IconButton( icon: Icon(Icons.close), onPressed: () { OverlaySupportEntry.of(context).dismiss(); }),),),); }, duration: Duration(milliseconds: 4000));

! [notice] basic (https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d04ecc3f114457c906bdc2dba95d86f~tplv-k3u1fbpfcp-zoom-1.image) If you have multiple messages to display, you can build a notification widget where you can pass in the title and message.Copy the code