Flutter desktop development – send local hover notifications 🔔

On most desktops I use, there are only a handful of applications that send local hover notifications. However, this does not interfere with our learning ✊, struggle may be able to use it later!

LeanFlutter, led by Lijy91, can be a great help when choosing which plug-ins to use for desktop development. If you need one, check it out for yourself.

The next two notifications are also found in the awesome-flutter-desktop repository under LeanFlutter.

local_notifier

Install 🛠

Click local_notifier to get the latest version. The following is the latest version at the time of writing:

local_notifier: ^ while
Copy the code

👻 Note: Additional operations are required when developing programs for Linux, which can be found here

Using 🍖

To send notifications, use an instantiated LocalNotifier object:

final localNotifier = LocalNotifier.instance;
Copy the code

If you want to use it globally, you can put this line in a custom global class.

To edit what you want to send, you need to use the LocalNotification class. Instantiating the class can take five arguments:

• String? identifier: used as a universal unique identifier
• required String title: Indicates the title of the notification, usually the software name
• String? subtitle: Indicates the title of the notification to be sent
• String? body: The body of the sent content
• bool silent = false: Whether to mute notifications when sending notifications

final notification = LocalNotification(
  identifier: '12345',
  title: 'Ancient Poetry Appreciation from',
  subtitle: 'Tao Yao - Anonymous [Pre-Qin]',
  body: 'The peach day burns its splendor. The son of the home, the appropriate home. Item N However, overdose of taoyao is effective. If the son goes home, it is appropriate for his family. \n Shu Shu, its leaf shu zhen. When a son returns, it is appropriate for his family. ',
  silent: false,); localNotifier.notify(notification);Copy the code

Now we can happily send a custom notification 🎉

The title parameter is the only one that is required, so let’s try passing this one:

final notification = LocalNotification(
  title: 'Ancient Poetry Appreciation from',); localNotifier.notify(notification);Copy the code

We found that just passing the title argument, it automatically assigns the title argument value to the subtitle argument and replaces the body argument with “new notification.” Well, that’s all local_notifier does for now, if you simply send a prompt using the plugin.

win_toast

Install 🛠

Click on win_toast to get the latest version. The following is the latest version at the time of writing:

win_toast: ^ hundreds
Copy the code

Using 🍖

To use this plug-in globally, you need to initialize it at app initialization. To be used on a page, as long as it is initialized at page initialization.

Three parameters are passed during initialization:

• required String appName: Program name
• required String productName: Product name
• required String companyName: Company name

await WinToast.instance().initialize(
  appName: 'First Desktop Application',
  productName: 'First Desktop Application',
  companyName: 'Hiden Intelligence',);Copy the code

Pick a unique AUMID that will identify your Win32 app tell us why you need to fill in the content 👀.

To send a notification, use the showToast method, which takes 5 parameters to pass:

• Required ToastType Type: There are eight types of toast display that are passed in:

  • ImageAndText01 to imageAndText04
  • Text01 to text04

  For the similarities and differences between these types, go to 👀

• Required String Title: The title of the notification display

• String subtitle = “: The main content of the notification display

• String imagePath = “: Image to display when selecting the imageAndText type

• List Actions = const [] : displays buttons in notifications

Use the text type

Let’s define a few variables and constants:

Toast? toast;
final List<String> _title = 'Shining For One Thing '('Shining For One Thing');
final List<String> _subtitle = 'I fall in love\nI see your love\nI'm waiting for you ';
final List<String> _actione = ['Previous song'.'Play/Pause'.'Next'];
Copy the code

Let’s look at the text01 type that is passed in only text:

toast = await WinToast.instance().showToast(
  type: ToastType.text01,
  title: _title,
  actions: _actione,
);
Copy the code

👻 Note: The subtitle argument cannot be passed when using toastType. text01 or toastType. imageAndText01.

Let’s look at the text02 type that is passed only text:

toast = await WinToast.instance().showToast(
  type: ToastType.text02,
  title: _title,
  subtitle: _subtitle,
  actions: _actione,
);
Copy the code

Toasttype. text03 and toastType. text04 are displayed in the same way as toastType. text02. You can try it yourself.

Use the imageAndText type

Change the value of a constant (not necessary) :

Toast? toast;
final List<String> _title = 'It's raining again. How are you feeling? ';
final List<String> _subtitle = 'Secretly tell you, tomorrow will be fine 😏\n good rain know season, when spring is happening. The wind into the night, moisten things silently. Wild path cloud all black, river ship fire alone Ming. Xiao see red wet place, flower heavy Brocade official city. ';
final List<String> _actione = ['Buksen 😭'.'Just want to sleep 🥱'.'Very pleased 😃'];
Copy the code

We also need to pass in an image. At present, we do not know how to fill in the path of the image, so first prepare a resource image to pass in its relative path:

final String _imagePath = 'assets/images/pdx.jpg';
Copy the code

Let’s look at the imageAndText01 type:

toast = await WinToast.instance().showToast(
  type: ToastType.imageAndText01,
  title: _titles * 3,
  imagePath: _imagePath,
  actions: _action,
);
Copy the code

😲 huh? Why is the picture we passed in not displayed? Try changing the link to a web image:

final String _imagePath = 'https://gitee.com/ilgnefz/image-house/raw/master/images/pdx.jpg';
Copy the code

The effect was the same. By looking at the example in the first link in the document, you can see that the absolute path to the image is needed.

How do I get the absolute path to a file in Flutter 🤔? Of course, you can just right-click on Copy Path in Android Studio, but it may not be there when the application is packaged and installed. The Path module is used to obtain the absolute Path of a file in Node.js. Should Flutter use the same plugin? Open pub.dev and search for it. Yaml is copied to pubspec.yaml for installation. An error is reported telling us that the plugin has been integrated into Flutter Desktop, but the version is different. 😀 that is not easy to do, the first step import:

import 'package:path/path.dart' as path;
Copy the code

There is no __dirname method in path. View the prompt and find that there is a current method. We don’t know what this method does, but it’s worth a try. Change imagePath to the following code:

final String _imagePath = path.join(path.current, 'assets/images/pdx.jpg');
Copy the code

Successful 🎉 🎉 🎉 🎉 🎉

Let’s use the imageAndText02 type:

toast = await WinToast.instance().showToast(
  type: ToastType.imageAndText02,
  title: _titles,
  subtitle: _subtitle,
  imagePath: _imagePath,
  actions: _action,
);
Copy the code

So imageAndText03 and imageAndText04 are going to look the same as imageAndText02, so I’m not going to put a picture here.

You may have noticed that the three buttons in the notification are determined by the actions parameter, but this parameter is passed in as a String, so how do we get the user clicking on these buttons?

Previously we defined a toast object to assign values to, using this parameter:

if(toast ! =null) {
  toast.eventStream.listen((event) {
    if (event is ActivatedEvent) {
      print(event); }}); }Copy the code

So what we’re going to do here is we’re going to get an Event object, and if we print it out we’re going to see that it just has one property actionIndex, and it returns an int, okay? Type. Using this property, we can obtain the number of buttons the user clicked:

WinToast.instance().bringWindowToFront(); // Close popup notifications after the user clicks
BotToast.showText(text: 'Your current state is${_action[event.actionIndex!] }');
Copy the code

Knowing which button the user clicked, it’s easy to code the event.

🛫OK, that’s the end of this article, which is for the current version of the plug-in and is not guaranteed to be applicable to future iterations of plug-in usage. I am only in the practice of the code part, such as the concept of some content or call error also please point out 🙏.

Finally, thanks to lijy91 and Boyan01 for maintaining and developing the above plugin 😁.