DEV Community

Cover image for Flutter Desktop Plugin
aseem wangoo
aseem wangoo

Posted on • Updated on • Originally published at flatteredwithflutter.com

Flutter Desktop Plugin

In case it helped :)
Pass Me A Coffee!!

We will structure this article into :

  1. Creating Desktop Plugin
  2. Using Desktop Plugin in Flutter application
  3. Enable support for Windows

Article here: https://flatteredwithflutter.com/flutter-desktop-plugin/

Creating Desktop Plugin


We need to run a command,

flutter create --org com.flatteredwithflutter --template=plugin init_dsktp_plugin

Breakdown :

  • To create a plugin, we need to use --template=plugin flag
  • The name of our plugin will be init_dsktp_plugin
  • Use the --org option to specify your organization, mostly in the reverse order…i.e, com.flatteredwithflutter

After running this command, you should now have a project structure like this,

Alt Text

Here, the folder name is same as you specified during the plugin creation command…Note : Windows folder is added later

Inside the pubspec.yaml, you can specify the platforms, you want to support…

Inside the lib folder, you can see init_dsktp_plugin.dart. This is the entry point, for outside Flutter application, into our plugin…

We expose a method called platformVersion . 

Alt Text

The name of our method channel is init_dsktp_plugin and method name is getPlatformVersion . Note: this should be same in the implementation files.


Implementation…

Inside the macOS folder, we see InitDsktpPlugin.swift .. This file is the brain of the plugin…

Steps :

  1. Register the plugin with the method channel as specified in the dart file..(see above)

Alt Text

Note: See the method channel is same as dart file one.

2. Implement the method..

Alt Text

This function is invoked whenever Flutter application calls a method of our plugin…We can have n number of cases here…

For our plugin, we have just getPlatformVersion . Inside this, we invoke 

ProcessInfo.processInfo.operatingSystemVersionString

Now, this ProcessInfo is specific to macOS. Read the doc. here. As per the docs :

operatingSystemVersionString

A string containing the version of the operating system on which the process is executing.

The result is collected and passed via FlutterResult..As per the docs,

FlutterResult : A method call result callback.

Used for submitting a method call result back to a Flutter caller. Also used in the dual capacity for handling a method call result received from Flutter.


Using Desktop Plugin in Flutter application

Lets use the plugin created above in our desktop application…

Steps :

  1. Open the pubspec.yaml of our Flutter Desktop Application, and include the plugin dependency as
...
dependencies:
init_dsktp_plugin:
git:
url: https://github.com/AseemWangoo/plugins.git
path: ./init_dsktp_plugin
...

By default, it takes the source code from the master branch.

2. Use the plugin, as any other dependency now…

FutureBuilder<String>(
future: InitDsktpPlugin.platformVersion,
builder: (context, snapshot) {
// YOUR LOGIC
},
)

Enable support for Windows

Warning : The plugin APIs, plugin tooling, and plugin structure for Windows are not at all stable. This means you should not publish Windows plugin implementations to pub.dev as anything published now will almost certainly not work with the final Flutter Windows support.

But we are devz, we like to explore !!!!

Steps :

  1. Download the windows folder from here….or individual files from here
  2. Change the ProjectName in plugin.vcxproj to your plugin's name.

In our case, it’s init_dsktp_plugin 

3. Change the ProjectGuid in plugin.vcxproj to a new UUID. Generate online here.

4. Change the FlutterPluginName in PluginInfo.props to your plugin's name.

In our case, it’s init_dsktp_plugin

5. Search for comments containing *** in the .h and .cpp file, and update the code as described in the comment..

In our case, SAMPLE has been replaced by INIT_DSKTP_PLUGIN and “sample_plugin” with “init_dsktp_plugin

In case it helped :)
Pass Me A Coffee!!

Source Code for Plugin…

Source Code for Desktop application…

Top comments (0)