Portability of Flutter Mobile Apps to Desktop Apps

by Milind Leslie

on June 21, 2019

We have come a long way across mobile app development. Different tools and technology hit the development market in many ways ranging from native app development to hybrid approaches. We have seen solid hybrid technologies like React native used widely for developing mobile apps. The latest addition to this category was Flutter, which was developed by Google.

Flutter gained wide popularity for its stability, easy to use coding style and ‘native’ like feel while developing hybrid apps for different platforms. Flutter apps are built using Dart, which is Google’s programming language. Google seems to have struck just the right balance, and the developer community seems to love it.

This year at Google I/O 2019 they are taking it beyond mobile with the launch of Flutter 1.5. The mobile framework is now a multi-platform UI framework, which supports the web, desktop, mobile, and even embedded devicesThis opens the possibility of a single code base from which we can create applications for any platform.

Flutter Desktop App

At the moment, flutter is running at the stable version of 1.5.4, with development going at a very fast pace. Flutter for desktop is no longer an experimental project — it has graduated into the Flutter engine. The targets are not yet production-ready , but Google has published early instructions for developing Flutter apps for Windows, Mac, and Linux.

The process is known as Flutter desktop embedding.

Support for desktop platforms is currently provided through some Flutter Engine Embedders, all of which are still in development. One of them is developed by Google.

The projects can be found in the following Github repositories:

https://github.com/google/flutter-desktop-embedding

https://github.com/Drakirus/go-flutter-desktop-embedder

https://github.com/gliheng/flutter-rs

Port a mobile app to desktop?

Let’s go and make a flutter desktop app using google’s flutter desktop embedding. For Flutter apps to run on Desktop, we must be on one of the latest releases of flutter.

As stated by Google,

To use any of the support (host machine being listed by flutter devices), two things must currently be true:

You must not be on the stable Flutter channel. This is to make it clear that desktop support is not yet considered stable and production-ready.

You must set the ENABLE_FLUTTER_DESKTOP environment variable to true. This is to avoid interfering with existing mobile development workflows while the long-term solution is being worked out

To ensure the same, just fire up a terminal and run the following commands.

flutter channel master
flutter upgrade

Or

An even simpler way is that we can temporarily download the latest beta version or even clone the master channel from https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

Now we can start porting a mobile app into a desktop app.

Steps:

Open your existing flutter project or create a new flutter project using terminal (flutter create) or Android Studio if you have the flutter plugin installed.

Don’t forget to change the flutter path to the latest one which you downloaded earlier.

 

Or using Terminal, type

export PATH=”$PATH:/<PATH TO FLUTTER>flutter/bin”

Eg: export PATH=”$PATH:/Users/iLeaf/Desktop/FlutterSDK/flutter beta 1.7.4/flutter/bin”

Next step is to enable the desktop support for flutter.

To do this, in a terminal type,

export ENABLE_FLUTTER_DESKTOP=true

Note: This feature will be available for only the current session of the terminal. So you might have to do it every time till Flutter desktop is production ready.

Now if you type flutter devices, you could see your desktop platform
(May change depending on your platform).

As flutter for Desktop is still under development, there is no tooling support for Flutter. Also the flutter create command currently does not support creating a new desktop application. So the only option is to manually configure the system specific files. Thankfully for us, the Flutter team at Google already did that for us.

For this, we can download the example provided by Google itself from

https://github.com/google/flutter-desktop-embedding.git

As you go the example folder, you could see the folders for macos, windows, and linux.
These are the build projects, which are supposed to be created through flutter create, once the desktop support becomes live. For now, we have to configure this in our project.

There are two ways to do that:

We can copy the system specific folder (linux, macos, or windows) from the example directory to our existing project directory.

Or

We can replace the lib folder inside the example directory with our existing code, and replace the pubspec.yaml file, with our existing one. Your convenience. I have tried both ways, Works like a charm.

Do a flutter pub get to update the pubspec.yaml. And voila… You are almost done.

Now time for the final touch. Open your flutter project, go to the main.dart. On top of the file add the following line

import ‘package:flutter/foundation.dart’ show debugDefaultTargetPlatformOverride;

Also add

debugDefaultTargetPlatformOverride = TargetPlatform.iOS; in the main function before or after runApp() method call.

(change depending on your platform, here, iOS was given since my platform was macOS)

Finally….go to the terminal, type flutter run.
(Note: Do a flutter clean if necessary and make sure there are no compilation errors)

You can see the app building for the desktop platform. If you have connected any mobile devices, make sure you run on the desktop platform specifying the device id. You can check device ids by using flutter devices command.

flutter run -d <deviceID>

Eg: flutter run -d macOS, You can see flutter launching for desktop.

Now you must be thinking, Is it so simple? Will everything just work ??

Yes…All the native flutter components and features work very well in the desktop version.

But the plugins you install won’t necessarily have complete desktop support. So many features of the app which rely on custom plugins might not work out of the box as of now. Also, you might experience some blurry resizing issues etc. But once it is production ready, everything should work just as it should and it will be the coolest feature around.

Here are some screenshots of our flutter sample mobile apps which we converted to desktop apps at iLeaf Solutions.

 

  • Share this Article

GET IN TOUCH WITH iLEAF

  • We can initiate development process at the hour of your convenience
  • Discussion on the projects can be held for a stipulated duration
  • We will sign NDA and the talks will be secured
  • We’ll show you around our cherished designs
  • Briefing on technology
  • Guaranteed source code delivery
  • Option to re-start a closed venture

See how we can unwrap your app idea and proceed towards success