Latest update:

Accidentally looking through the source code and finding interesting code:

Code file path: packages/flutter/lib/SRC/foundation/the dart

You can distinguish between Web and IO in the following ways, ha ha ha, is this stealth joking JS?

/// A constant that is true if the application was compiled to run on the web.
///
/// This implementation takes advantage of the fact that JavaScript does not
/// support integers. In this environment, Dart's doubles and ints are
/// backed by the same kind of object. Thus a double 0.0 ` ` is identical
/// to an integer ` 0 `. This is not true for Dart code running in AOT or on the
/// VM.
const bool kIsWeb = identical(0.0.0);
Copy the code

At the Google Developer’s Conference, Flutter 1.9 was announced. One of the many updates was that the Web SDK incorporated the Flutter SDK. That said, we can really do a package of code for Android /ios/ Web/desktop (MAC, Windows, Linux). Next, please follow me.

Enabling Web Support

The commandflutter config --enable-web When enabled, we can see that the Device has Chrome and Server Web options.

Transform the old Flutter_Web project

If you have not used Package: Flutter_web before, skip ahead and create a new Flutter Web app

Upgrading from Package: Flutter_web to the Flutter SDK

main.dart

The old project automatically generated a main.dart under the Web folder

Inside the main do is webOnlyInitializePlatform initialization, this code with the desktop version is similar, and guide the lib. The following main entrance of the dart

import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:json_to_dart/main.dart' as app;

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}
Copy the code

In the new Web, you no longer need to set it, and the main.dart is no longer needed in the Web folder.

Let’s take a quick look at the Settings for the desktop version

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
Copy the code

reference

Convert from web SDK to the Flutter SDK

The font

As you can see earlier, some of the ICONS in The Flutter for Web are not displayed at all. It is also explained that the previous Web demo did not add icon font file, so it does not display. The final product will have a fontManifest.json file indicating the font file

flutter:
  uses-material-design: true
Copy the code

assets

Previously you had to write assets under the Web folder to make them work, now the resource file is used the same way with Flutter.

reference

Quote finally unified, happy

run

The command changed from Webdev serve or pub run build_runner serve to Flutter run -d Chrome

Create a flutter Web app

Building a Web application with Flutter

SDK 1.9

First we need to make sure the Flutter SDK is greater than or equal to 1.9. Run the command Flutter config –enable-web. Then execute the flutter devices

Chrome is ok

create

We can create a Flutter application and then execute the Flutter create. A web folder containing the index.html file is generated

Notice the dot after the command

run

Select chrome from release/–profile or vscode and start debug will download the web SDK for the first time

packaging

After the execution of the Flutter build Web, the Web folder will be generated inside the Build folder, where all the build products will be

You can see that the resources defined in YAML are also placed in the Asset folder

  assets:
     - assets/
Copy the code

Platform to distinguish

Since the Web does not support DART: IO, how do we package and compile a single copy of code? As mentioned earlier, the desktop needs to set the platform at the entry to targetPlatform.Fuchsia

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
Copy the code

So how do we deal with this situation? Now let’s talk about conditional introduction and derivation

The import/export

In DarT2 we can use dart.library.io and dart.library.js to distinguish between being able to call the IO API (Android /ios/ desktop) and being able to call the Web

import 'main_web.dart' if (dart.library.io) "main_io.dart";
export 'config_helper_web.dart' if (dart.library.io)"config_helper_io.dart";
Copy the code

Create IO and Web files

Take the config_helper.dart class as an example, which is used to cache configuration information:

  • On the desktop it is written to a file under the directory
  • For the Web, the call through JS to manipulate localStorage

Dart and congfig_helper_web.dart, and then export them to config_helper.dart

Looking forward to improving

  • Yaml files

There are some references in YAML, such as resource files and font files, that may be needed for this platform but not for other platforms. There is no way to make the difference. The only way to do it is to do the removal or create different items in the main entry after packaging

  • code

There is no way to choose whether or not to execute a line of code based on the platform, but to put it in a different file and import it based on the platform. Hope to add platform symbol like C#

conclusion

The weekendJsonToDartTool the Flutter part of the code structure from

I’ve changed it to a common code, so if you’re interested, you can look at itJosn To Dart. Welcome to joinFlutter CandiesTogether they produce cute little candies called FlutterQQ group: 181398081

Finally put the Flutter on the bucket. It smells good.