Category: Flutter 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 :

3. Check the devices supported now :

flutter devices

---

Note : See the macOS now !!!

---

Fetch Platform Files

1. Clone the flutter-desktop-embedding repo

2. Go to example directory and you should see

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 :

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,

• 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

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'

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

Select the device before running the project now,

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