Code github address, added PC project: github.com/koudle/GDG_…

The previous two articles implemented a simple weather query APP:

  1. Flutter combat 1 – Write a weather query APP
  2. Flutter Combat 2 – Write a weather query APP

Because Flutter can run on PC as well as Android and iOS, I have been trying to see how it would look cross-platform on PC. Discovering that the Flutter wants to run on a PC is not easy.

Here we go.

1. Start

This library supports Flutter on Windows, macOS, and Linux:

Github.com/google/flut…

Follow this instruction next.

2. Run the Example project on the PC

When the flutter-desktop-embedding Clone is added locally, the following points are required:

  • Flutter -desktop-embedding works at the same level as the flutter SDK directory

In flutter – desktop – embedding/example/macos path has a ExampleEmbedder xcodeproj, double-click the open in xcode, run after the results are as follows

Flutter feels easy on PC, doesn’t it?

3. Run the weather query APP on the PC

Next, the implementation of running on THE PC before writing the weather query APP

3.1 Modification of Flutter code

Because Flutter does not support PC by default now, if you run on PC without modification, an error of Unknown Platform will be reported. Why is this error reported? When the Flutter is running, the value of TargetPlatform will be set according to the current platform. However, PC is not the default platform supported by Flutter, so no value is assigned to TargetPlatform, thus throwing an error of Unknown Platform. Specifically, we look at the source code:

  • Dart contains the following code in the Flutter source:
TargetPlatform get defaultTargetPlatform {TargetPlatform result; // Assign values by platform, but only iOS, Android, Fuchsia, no PCif (Platform.isIOS) {
    result = TargetPlatform.iOS;
  } else if (Platform.isAndroid) {
    result = TargetPlatform.android;
  } else if (Platform.isFuchsia) {
    result = TargetPlatform.fuchsia;
  }
  assert(() {
    if (Platform.environment.containsKey('FLUTTER_TEST'))
      result = TargetPlatform.android;
    return true; } ()); / / here have judgment debugDefaultTargetPlatformOverride value, have the value, is assigned to the resultif(debugDefaultTargetPlatformOverride ! = null) result = debugDefaultTargetPlatformOverride; // If the value of TargetPlatform is not reached at this point, an exception is thrownif (result == null) {
    throw FlutterError(
      'Unknown platform.\n'
      '${Platform.operatingSystem} was not recognized as a target platform. '
      'Consider updating the list of TargetPlatforms to include this platform.'
    );
  }
  return result;
}
Copy the code

Flutter only judged iOS, Android and Fuchsia platforms, but not PC platform. The result value was null, throwing the exception of the Unknown platform.

It’s easy, because there’s no copy on the PC, so we have to copy, and how do we copy? Look at the code above:

  if(debugDefaultTargetPlatformOverride ! = null) result = debugDefaultTargetPlatformOverride;Copy the code

So, will give debugDefaultTargetPlatformOverride copy, here is akin to Google deliberately open a vent to expand.

Assign before main(), runApp(), as follows:

void main(){
  _setTargetPlatformForDesktop();
  runApp(MyApp());
}

/// If the current platform is desktop, override the default platform to
/// a supported platform (iOS for macOS, Android for Linux and Windows).
/// Otherwise, do nothing.
void _setTargetPlatformForDesktop() {
  TargetPlatform targetPlatform;
  if (Platform.isMacOS) {
    targetPlatform = TargetPlatform.iOS;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }

}
Copy the code

The Flutter code modification is complete!

3.2 Create an empty macOS project

Create a new empty macOS project in Xcode as follows:

File -> New -> Project -> macOS -> Cocoa APP

This creates an empty macOS project, which is exactly the same as Flutter on iOS and Android. It is an empty shell that acts as a container for Flutter to run on.

The following dependencies of Flutter are added to the macOS project:

  1. Flutter – desktop – embedding/library/FlutterEmbedderMac under macos xcodeproj
  2. Flutter – desktop – embedding/plugins/color_panel/under macos FlutterEmbedderColorPanel. Xcodeproj
  3. Flutter – desktop – embedding/plugins/file_chooser/under macos FlutterEmbedderFileChooser. Xcodeproj
  4. Flutter – desktop – embedding/plugins/under the menubar/macos FlutterEmbedderMenubar xcodeproj

Add flutter_assets to the build folder of the Flutter project

Finally finished, exhausted, feel sure to run up, a little running, error! Turned out to be a path to find, change is good, running, and Flutter SDK can not find, again change, and prompt FlutterEmbedder. The framework version is wrong, the original is my local version of Flutter and Flutter – desktop – the version is not the same as in the embedding, Then replaced to the latest version, and finally ran.

Now I understand why the flutter-desktop-embedding is put in the same level of directory as the flutter SDK. If the flutter-desktop-embedding is not in the same level of directory, it will not work at all. Flutter -desktop-embedding is not yet well developed, even the dependencies are not properly configured. Fortunately, the Google team has started to attach importance to flutter running on PC.

The above is too complicated, I do not recommend this to build PC projects, so there is no detail, fortunately, there is a more convenient method!

4. Feather

Using Feather tool to build Flutter PC project is much more convenient than building Flutter yourself!

Website Feather

Note: Using this tool requires scaling walls

Install Feather and see how to build PC project:

4.1 the first step

Click BROWSE and select your own local project. If you have not modified the Flutter code, you will be prompted:

4.2 the second step

Write the name of your APP

4.3 the third step

Choose the ICON

4.4 the fourth step

In the list, click project to go to a list and click TEST.

And I’m gonna hit UPDATE

4.5 step 5

OPEN XCODE

Then it is built, and the built project is under the folder of the Flutter project

5. Operation effect