Writing in the front

Flutter is a cross-platform, high-fidelity, high-performance mobile application development framework launched by Google and open source. Dart allows developers to develop apps that run on iOS, Android, the Web, and the desktop.

Website of Flutter: Flutter – IO

Flutter_web is a Web-compatible implementation of Flutter code that compilers existing Flutter code written using Dart into a client that can be embedded in a browser and deployed to any Web server.

Our goal is to enable building applications for mobile and web simultaneously from a single codebase. However, to allow experimentation, the tech preview Flutter for web is developed in a separate namespace. So, as of today an existing mobile Flutter application will not run on the web without changes.

Flutter aims to build both mobile and Web applications from a single code base. However, for experimental purposes, Flutter_web was developed in a separate namespace. Therefore, as of now, existing mobile Flutter applications cannot run on the Web without making changes.

In short, Flutter does not currently support both mobile and Web applications and will need to be migrated on its own, but it is not far off.

Migrate the Flutter project to the WEB side

The project we migrated this time is Flutter_challenge_googlemaps, and the effect picture is as follows:

How to do?

Most of the Dart code is common; only some dependencies and configurations need to change.

First, pubspec.yaml needs to replace flutter with Flutter_web, while removing the asset and font related code.

name: flutter_web_challenge_googlemaps

environment:
  # You must be using Flutter >=1.5. 0 or Dart >=2.3. 0
  sdk: '0.1 < 3.0.0' > = 2.3.0 - dev.

dependencies:
  flutter_web: any
  flutter_web_ui: any


dev_dependencies:
  build_runner: ^1.4. 0
  build_web_compilers: ^2.0. 0

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test
Copy the code

After the dependencies are updated by the FLUTTER package GET, the relevant references in the DART file in the lib path need to be updated.

//flutter
import 'package:flutter/material.dart';
//flutter web
import 'package:flutter_web/material.dart';
Copy the code

The difference is that flutter is replaced with Flutter_web, leaving the code basically untouched.

Next, to preview the web page, we need to create our own Web directory and create web/index.html and web/main.dart files in the directory.

web/index.html


      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
Copy the code

web/main.dart

import 'package:flutter_web_ui/ui.dart' as ui;
// Replace flutter_web_challenge_googlemaps with your own package
import 'package:flutter_web_challenge_googlemaps/main.dart' as app;

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

Copy the code

As for resource files, images, fonts, etc., unlike Flutter projects, these need to be placed in the Web \ Assets directory path, and remember to update the relevant references in the code.


Image.asset("assets/logo.ong");
// Need to change to
Image.asset("logo.png");

Copy the code

If you use Material Icon, you need to create a fontmanifest. json file in the Web /assets directory and add the address.

[{"family": "MaterialIcons"."fonts": [{"asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"}}]]Copy the code

The entire Web directory would look like this:

Running the project, you can find that there is basically no difference with the mobile end.

The effect is still quite smooth 🤙.

If you want to see the release, you can run it

flutter pub global run webdev serve -r

Run it if you want to publish artifacts

flutter pub global run webdev build

This generates a build folder at the root of the project that contains files that can be deployed to the server, as shown below:

You can use GH-Pages to simply deploy it to Github and preview it

Flutter – UI – challenges. Making. IO/flutter_web…

About how to use gh – page preview pages, you can look at this link: www.cnblogs.com/MuYunyun/p/…

Write in the last

Although there are many cross-platform projects, such as Weex, RN, Kotlin and so on, it is Flutter that truly makes me experience the efficient integration of cross-platform. This may be one of the reasons why I have been studying and engaging in Flutter development since the last year.

Of course, Flutter_web is still in its early stages, and some of flutter’s features, such as Gaussian blur, have not been fully ported. However, the official version of Flutter_Web is just coming, and all of these will be available in the near future.

Finally, please attach the relevant address: github.com/flutter-ui-… The purpose of this article is to open a new repository for ease of view. In fact, you only need to open a new Web branch.

Reference documentation

Flutter_web:github.com/flutter/flu…

Migration Guide: github.com/flutter/flu…

==================== split line ======================

If you want to learn more about MVVM, Flutter, and responsive programming, please follow me.

You can find me at:

Jane: www.jianshu.com/u/117f1cf0c…

The Denver nuggets: juejin. Cn/user / 817692…

Github: github.com/ditclear