Flutter and Desktop

Flutter and Desktop

Preserving oneness…

What if, I wanted my code to run on desktop ? Hmmmm….

Flutter has bridged the gap between Android and iOS development, but now Flutter is expanding to the web, desktop and more, growing closer to the “write once, run anywhere” dream.

But, how ???

Begin…

At the end of this article, you should be able to run a sample app on desktop….

We will structure this article into :

  1. Enable Desktop Support
  2. Fetch platform files
  3. Configure Flutter project with Desktop

Enable Desktop Support:

  1. Switch to the master channel :
flutter channel master

Possibly, you might need to upgrade also,

flutter upgrade

2. Enable the Desktop Feature for your platform as

  • flutter config --enable-linux-desktop for Linux.
  • flutter config --enable-macos-desktop for macOS.
  • flutter config --enable-windows-desktop to enable Windows.

Note : Confirm again by running 

flutter config

You should see like :

Flutter and Desktop
Flutter and Desktop

3. Check the devices supported now :

flutter devices
Flutter and Desktop
Flutter and Desktop

Note : See the macOS now !!!


Fetch Platform Files

  1. Clone the flutter-desktop-embedding repo

2. Go to example directory and you should see

Flutter and Desktop
Flutter and Desktop

We will return to this step shortly…..

Note : You can run the program inside example directory via

flutter run

Output will be something like this :

Flutter and Desktop
Flutter and Desktop

Configure Flutter project with Desktop….

  1. Initialize a flutter project, either using VSCode or 
flutter create "YOUR NEW PROJECT NAME"

2. Go to the example directory from the previous step,

Folders
Folders
  • copy windows folder for Windows.
  • copy linux folder -> linux users.
  • copy macos folder for mac.

NOTE : Also copy fonts folder from the example folder.

Paste (macos in my case) and fonts in the new project you created just now

Fonts and macos folder pasted in new project
Fonts and macos folder pasted in new project

3. In your main.dart file (of new project), you need to add these lines :

// ADD THIS IMPORT
import 'package:flutter/foundation.dart'
show debugDefaultTargetPlatformOverride;

void main() {

// ADD THIS LINE
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

runApp(MyApp());
}

4. Final step, in your pubspec.yaml (of new project), under environment section, add 

flutter: '>=1.10.2-pre.54'
Flutter added in environment….
Flutter added in environment….

Add the following under flutter section,

fonts:
- family: Roboto
fonts:
- asset: fonts/Roboto/Roboto-Thin.ttf
weight: 100
- asset: fonts/Roboto/Roboto-Light.ttf
weight: 300
- asset: fonts/Roboto/Roboto-Regular.ttf
weight: 400
- asset: fonts/Roboto/Roboto-Medium.ttf
weight: 500
- asset: fonts/Roboto/Roboto-Bold.ttf
weight: 700
- asset: fonts/Roboto/Roboto-Black.ttf
weight: 900
Fonts added in pubspec.yaml
Fonts added in pubspec.yaml

Select the device before running the project now,

Target platforms…
Target platforms…

Finally, run the project, and see your application running on desktop…!!!!!

Note: You can also use this command to run…(macOS for my case)

flutter run -d macOS

In case, you got something wrong, look at the source code here,

https://github.com/AseemWangoo/Experiments_with_Desktop