Photo by Campbell on Unsplash

Adding support for Multi-platform in your Flutter Apps

Have you ever wondered how you can add support for all platforms like Web, Windows, macOS or Linux with Flutter? Here is complete guidance about the process to add support for all of these platforms in your flutter app.

As we know with the Flutter 2.0 release they have released Desktop and Web support in stable channel, so that now we can create(or add support to) an app for those platforms with Flutter’s stable channel.

Before we get into the process let’s see which are some basic software requirement that we should install first.

1. Flutter SDK.
2. Any IDE which supports flutter, Android Studio, VS Code or Intelij IDEA which ever works best for you. Install Flutter and Dart Plugins for in the IDE which you decided to use.
3. Chrome Browser, We will need it to run and debug apps for web.
4. Visual Studio 2019 with “Desktop development with C++” workload for Win32 or “Universal Windows Platform development” workload for UWP. (Only for Windows desktop development)
5. Xcode and CocoaPods ( For macOS desktop development)
6. Clang, CMake, GTK delvelopment headers, Ninja build, pkg-config (For Linux desktop development)

Adding a web support:

To add web support to your existing application you need to execute below commands in your terminal.

• flutter config --enable-web
  It will enable Flutter for web flag in the flutter configuration setting.
• flutter create .
It will create web folder in your project directory and will add other required files into it. (do not forget to put . at last)

To add web support in new apps is even more easier with Flutter 2.0 (stable channel), as it will automatically add support for web in new project. If you are using any lower flutter version for new apps then you have to manually run above commands.

Adding a desktop support:

Key Point to keep in mind

To compile a desktop application, you must build it on the targeted platform: build a Windows application on Windows, a macOS application on macOS, and a Linux application on Linux.

To add desktop support first we need to enable some flag those are specific to the platform that we are targeting, In order to do that we need to execute below command in terminal.

• flutter config --enable-<platform>-desktop

Here <platform> is desktop-platform like windows, macos, linux. So ideally commands would be like this:
* flutter config --enable-linux-desktop
* flutter config --enable-macos-desktop
* flutter config --enable-windows-desktop (This is only for Win32 based desktop support)

Currently it’s only supports Win32 based windows application in stable channel, to add support for UWP based desktop app you have to switch to dev channel, then upgrade flutter and enable uwp-desktop flag in config. In order to do that execute following commands from terminal.
* flutter channel dev
* flutter upgrade
* flutter config --enable-windows-uwp-desktop

One thing to note here is that after enabling desktop support you need to restart your currently opened IDE.

Once you execute flutter config --enable-<platform>-desktopcommand, this setting will remains the same in config until you reset the config, so you don’t need execute it again and again.

To add desktop support to your existing application you need to execute below commands in your terminal.

• flutter create --platforms=windows,macos,linux .
  It will create necessary desktop files and directories in your project. If you want add support only for specific desktop platform you can change the platform-list accordingly.

Adding a desktop support in new project is much more easier once you install the required software/libraries and enable the desktop support flags, you just need to create new flutter project and it will create all the required directories and files into your project.

As per official doc : Flutter’s desktop beta snapshot on stable channel (At the time of writing this)

To make it easier to try out desktop support for Flutter, we are shipping a snapshot of Flutter’s desktop beta on the stable channel. This means that you can easily try desktop support without needing to switch to the Flutter beta channel. However, the snapshot included in the stable channel won’t be updated until the next Flutter stable release. If you want the latest version of desktop support, you must switch to the Flutter beta channel.

Run an app for a specific platform

You can run your app for your desired platform with two different ways.

Using command line

To run an app using command line you can execute one these commands according to desired platform.

• flutter run -d chrome
• flutter run -d macos
• flutter run -d linux
• flutter run -d windows
• flutter run -d winuwp

Using Flutter Device Selector from IDE

You can select any connected device by using Flutter Device Selector and press on run button as shown in the picture below.

Flutter Device Selector (Android Studio)

Demo App

I have created simple demo app to demonstrate how the resulted output will look-like for several platforms. In this demo app I have tried to implement UI of an eCommerce app which looks pretty similar in every platform. Please have a look at the screenshots below.

Android, iOS(iPhone 12 Simulator) app

Web app (Chrome)

Desktop app (macOS)

You can review the code for this sample from below sample app available on Github.

https://github.com/Mindinventory/FlutterMultiPlatformSample

You can also read more about adding desktop or web support in flutter app from the official docs below.

https://flutter.dev/desktop
https://flutter.dev/docs/get-started/web

Thanks for reading and keep fluttering 🐥 !!