Flutter Desktop Plugin
Tags: flutter, dart, webdev, productivity
Published: 2020-03-14 10:46:22

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p><strong>We will structure this article into&nbsp;:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Creating Desktop Plugin</li><li>Using Desktop Plugin in Flutter application</li><li>Enable support for Windows</li></ol>
<!-- /wp:list -->

{% youtube RQzhAQlg2JQ %}

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

<!-- wp:heading {"level":4} -->
<h4>Creating Desktop&nbsp;Plugin</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><br>We need to run a command,</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">flutter create --org com.flatteredwithflutter --template=plugin init_dsktp_plugin</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Breakdown&nbsp;:</p>
<!-- /wp:paragraph -->


<!-- wp:list -->
<ul><li>To create a plugin, we need to use <code>--template=plugin</code> flag</li><li>The name of our plugin will be <code>init_dsktp_plugin</code></li><li>Use the <code>--org</code> option to specify your organization, mostly in the reverse order…i.e, <code>com.flatteredwithflutter</code></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>After running this command, you should now have a project structure like this,</p>
<!-- /wp:paragraph -->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4qbw6kgk5egm21tovaf7.png)

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

<!-- wp:paragraph -->
<p>Inside the <strong>pubspec.yaml,</strong> you can specify the platforms, you want to support…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Inside the <strong>lib folder</strong>, you can see <strong>init_dsktp_plugin.dart. </strong>This is the entry point, for outside Flutter application, into our plugin…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We expose a method called <code>platformVersion</code>&nbsp;.&nbsp;</p>
<!-- /wp:paragraph -->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qkadhglrus11208tdulw.png)

<!-- wp:paragraph -->
<p>The name of our method channel is <code>init_dsktp_plugin</code> and method name is <code>getPlatformVersion</code>&nbsp;. <strong>Note: this should be same in the implementation files.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p><strong>Implementation…</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Inside the macOS folder, we see <code>InitDsktpPlugin.swift</code>&nbsp;.. This file is the brain of the plugin…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Steps&nbsp;:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Register the plugin with the method channel as specified in the dart file..(see above)</li></ol>
<!-- /wp:list -->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n2x14l7mgo2m01ecacgl.png)
<!-- wp:paragraph -->
<p><em>Note: See the method channel is same as dart file one.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2. Implement the method..</p>
<!-- /wp:paragraph -->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hvm2fdlah0fl4fzpcj5c.png)

<!-- wp:paragraph -->
<p>This function is invoked whenever Flutter application calls a method of our plugin…We can have n number of cases here…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For our plugin, we have just <code>getPlatformVersion</code>&nbsp;. Inside this, we invoke&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">ProcessInfo.processInfo.operatingSystemVersionString</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Now, this ProcessInfo is specific to macOS. Read the <a href="https://developer.apple.com/documentation/foundation/processinfo" rel="noreferrer noopener" target="_blank">doc. here</a>. As per the docs&nbsp;:</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>operatingSystemVersionString</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>A string containing the version of the operating system on which the process is executing.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>The result is collected and passed via <strong>FlutterResult..</strong>As per the docs,</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>FlutterResult</strong>&nbsp;: A method call result callback.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>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.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":4} -->
<h4>Using Desktop Plugin in Flutter application</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lets use the plugin created above in our desktop application…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Steps&nbsp;:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Open the <code>pubspec.yaml</code> of our Flutter Desktop Application, and include the plugin dependency as</li></ol>
<!-- /wp:list -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">...<br>dependencies:<br>  init_dsktp_plugin:<br>    git:<br>      url: https://github.com/AseemWangoo/plugins.git<br>      path: ./init_dsktp_plugin<br>...</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p><em>By default, it takes the source code from the </em><code><em>master</em></code><em> branch.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2. Use the plugin, as any other dependency now…</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">FutureBuilder&lt;String&gt;(<br>   future: InitDsktpPlugin.platformVersion,<br>   builder: (context, snapshot) {<br>     // YOUR LOGIC<br>   },<br>)</pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":4} -->
<h4>Enable support for&nbsp;Windows</h4>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Warning&nbsp;: The plugin APIs, plugin tooling, and plugin structure for Windows <strong>are not at all stable</strong>. This means you <strong>should not publish Windows plugin implementations to pub.dev</strong> as anything published now will almost certainly not work with the final Flutter Windows support.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>But we are devz, we like to explore&nbsp;!!!!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Steps&nbsp;:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Download the windows folder from <a href="https://github.com/AseemWangoo/flutter_programs/blob/master/windows.zip" rel="noreferrer noopener" target="_blank">here</a>….or individual files from <a href="https://github.com/google/flutter-desktop-embedding/tree/master/plugins/sample/windows" rel="noreferrer noopener" target="_blank">here</a></li><li>Change the <code>ProjectName</code> in <code>plugin.vcxproj</code> to your plugin's name.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In our case, it’s <code>init_dsktp_plugin</code>&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3. Change the <code>ProjectGuid</code> in <code>plugin.vcxproj</code> to a new UUID. Generate online <a href="https://www.uuidgenerator.net/" rel="noreferrer noopener" target="_blank">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4. Change the <code>FlutterPluginName</code> in <code>PluginInfo.props</code> to your plugin's name.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our case, it’s <code>init_dsktp_plugin</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>5. Search for comments containing <code>***</code> in the&nbsp;<code>.h</code> and&nbsp;<code>.cpp</code> file, and update the code as described in the comment..</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our case, <code>SAMPLE</code> has been replaced by <code>INIT_DSKTP_PLUGIN </code>and “<code>sample_plugin</code>” with “<code>init_dsktp_plugin</code>”</p>
<!-- /wp:paragraph -->

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><a href="https://github.com/AseemWangoo/plugins" rel="noreferrer noopener" target="_blank">Source Code for Plugin…</a></p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><a href="https://github.com/AseemWangoo/Experiments_with_Desktop" rel="noreferrer noopener" target="_blank">Source Code for Desktop application…</a></p></blockquote>
<!-- /wp:quote -->

{% youtube RQzhAQlg2JQ %}