background

In fact, without much background, Flutter for Web was the Google Conference that released a preview of Flutter for Web with the release of version 1.5.4.

From May to now (September), the industry has mixed views on Flutter for Web.

At present, the official self-reported problems include the following contents:

  • Flutter for Web does not yet have a plugin system. Dart: HTML, DART :js, DART: SVG, AND DART: Indexed_DB are available for the time being, using only browser apis accessible from other web libraries
  • A Flutter for Web cannot implement all of a FlutterApi
  • Code generated by Flutter for Web may run slowly or display important UIjank
  • Currently, desktop user interface interaction is not complete, soflutter_webIt runs on a PC browser with a user interface similar to that of a mobile APP
  • Development workflow currently only works on Chrome(my Safari (version 12.1.1) works fine)

Although Flutter for Web still has some problems, it’s a good thing that it’s only a preview of the future. After all, Google’s possibilities are endless. At the same time, THE author learned from some channels that Flutter for Web will have big moves at the end of this year.

Here is the official Flutter 2019, which is “an early adopter program for Google”, which states: “Excellent candidates will be involved in compelling scenarios, with a Flutter Web-based experience planned for release by the end of 2019”.

Get to the point, give me a beats, let me freestyle!

preface

My team has previously developed A “quick start APP for FLutter developers”, which has been well received by some FLutter starters. If you are not familiar with this project, please go here.

When FLutter Go meets FLutter for Web, as milk meets coffee, we must do something.

  • First: experienceFlutter for WebHow on earth;
  • Second: for the need fromFlutter native 到 Flutter-webDevelopers, touch stone wading road, after all, fromnative 到 webIt’s not a one-click creation. There’s a lot of holes to fill.

Flutter- go-Web support is not yet stable. We designated this release as a technical preview; The reduction rate of Flutter Go native transplantation is about 80%. Designed to help Flutter developers quickly become familiar with Flutter-web official practices.

After The official announcement that Flutter will not be developing hot Code push for the time being, Flutter- Web is certainly the fastest way to dynamically update Code. It is not the best solution, but it is the easiest one to degrade.

By learning the Flutter- Go Web version, you can restore the Flutter native version quickly and effectively. To help developers, a demo of the quick H5 version provides a demonstration of Flutter- Web’s capabilities.

  • Online display address
    • Flutter GO website
    • Flutter Go Web version

To prepare

Without further ado, a basic understanding of Flutter- Web is recommended before development. If familiar, please ignore.

  • Please understandFlutter-webThe official instructions
  • Please understandFlutter-webMigration Guide for

Build environment

1. Install the Flutter_Web build tool

Type the command to pull the Webdev program from a mirror of pub.dev, which is similar to the build tool on the front end

$ flutter pub global activate webdev
Copy the code

Make sure that the environment variable $HOME/. Pub -cache/bin is present. The environment variable is modified in vim ~/.bash_profile

// ~/.bash_profile
$ export PATH="$PATH":"$HOME/.pub-cache/bin"
Copy the code

2. Pullflutter_webThe sample

Flutter- Web version is based on the Web version of the Packages, so a new project has to be started. To avoid creating inconsistencies, make changes based on the official Flutter_Web example

$ git clone https://github.com/flutter/flutter_web.git flutter_go_web
Copy the code

3. Create aflutter_go_webproject

Since we only have one target project, we can delete the Examples directory and replace it with Flutter Go project development.

$ cd flutter_go_web
$ rm -rf examples
Copy the code

4. Create a vm manuallyyamlfile

In the project root directory, you need to create two key.yaml files. Build. yaml is the necessary configuration for releasing the version. Pubspec. yaml is the configuration for all dependencies, similar to package.json in webpack.

# build.yaml
targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        # Avoid building the test directory.
        generate_for: ['web/**.dart']
        options:
          dart2js_args:
            - --no-source-maps
            - -O4
            - --fast-startup
            - --minify
            - --trust-primitives
            - --trust-type-annotations
Copy the code
# pubspec.yaml
name: flutter_go
description: flutter_go
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: any build_web_compilers: Any build_daemon: any # dependency_overrides Github: flutter_web: git: url: HTTPS://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
Copy the code

Dependency_overrides you can also configure the local path, but in order to ensure that the dependent library is up to date, it is better to use git.

dependency_overrides:
  flutter_web:
    path: ./packages/flutter_web
  flutter_web_test:
    path: ./packages/flutter_web_test
  flutter_web_ui:
    path: ./packages/flutter_web_ui
Copy the code

Update 5.packages 包

$ flutter pub upgrade
! flutter_web 0.0. 0 from path packages/flutter_web
! flutter_web_ui 0.0. 0 from path packages/flutter_web_ui
Running "flutter pub upgrade" in hello_world... 5.0s
Copy the code

6. A copyFlutter-goLibs under the project toFlutter_go_webdirectory

7. You can use it nowwebdevBuild and start the development server

$webdev serve or webdev uses $webdev serve --auto restart with hot reloadingCopy the code
[INFO] Reading cached asset graph completed, took 598ms
[INFO] Checking for updates since last build completed, took 2.1s
[INFO] Starting resource servers...
Copy the code

If the connection is still in progress, the resource file is missing. Proceed with the following operations

8. To createwebThe entrance

Create a web folder manually and create two files: index. HTML for the entry HTML page and main.dart for the HTML reference file

<! -- 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
/// main.dart
import 'package:flutter_web_ui/ui.dart' as ui;
/// Flutter_go is the project name already set in pubspec.yaml
import 'package:flutter_go/main.dart' as app;
main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}
Copy the code

The file directory structure is basically formed as follows:

9. Run it againwebdevCompile and start the development server

$ webdev serve --auto restart
Copy the code

The local server can then run! ? Before you get busy, here are a bunch of errors…

package:flutter/material.dart -> package:flutter_web/material.dart
package:flutter/widgets.dart -> package:flutter_web/widgets.dart
package:flutter/cupertino.dart -> package:flutter_web/cupertino.dart
package:flutter/services.dart -> package:flutter_web/services.dart
package:flutter/rendering.dart -> package:flutter_web/rendering.dart
package:flutter/gestures.dart -> package:flutter_web/gestures.dart
dart:ui -> package:flutter_web_ui/ui.dart
Copy the code

You can replace files one by one, but I have written a conversion library trans2fw small tool, with a command to convert the [official common code base] to the Web version, reduce the development cost of everyone. Trans2fw is a tool developed by the author to automate the transformation of flutter native projects into flutter- Web projects. It has been submitted to the PUB mirror. Making address > > >

  • The installationtrans2fwTools, and register the program
  $ pub global activate trans2fw
  $ pub global run trans2fw
Copy the code
  • runtrans2fwTool, according to the prompt input, after the installation is completed, the basic input conversion directory according to the prompt can be
$trans2fw [✓] Specify the desired file directory (relative to the project directory): lib [✓] will replace the original file. (y/N) y {path: lib, cover:true} using input file directory: lib converted file: : lib/routers/application. The dart: :4The converted file: : lib/routers/routers. Dart: :4The files to be converted are as follows: Lib /routers/ Router_handler. dart:4Converted file ::lib/resources/icon_names.dart::3Dart :lib/resources/shared_preferences_keys.dart::3Widget_name_to_icon.dart ::lib/resources/widget_name_to_icon.dart::3Converted file ::lib/standard_pages/index.dart::6.Copy the code

Just a moment… Witness the miracle

10. Run it againwebdevCompile and start the development server

$ webdev serve --auto restart
Copy the code

what c… is your problem ? ! And so much more… Don’t worry and look again, the rest are third-party library dependencies! If your own project doesn’t have a lot of third-party libraries, it’s probably already up and running. Never mind. Let’s take it one by one.

Resolving third-party libraries

To summarize what third-party libraries need to be addressed:

  • fluro
  • flutter_jpush
  • flutter_spinkit
  • event_bus
  • share
  • shared_preferences
  • zefyr
  • image_picker
  • sqflite
  • url_launcher
  • flutter/foundation
  • flutter_webview_plugin
  • flutter_bloc
  • bloc
  • dio
  • city_pickers
  • markdown
  • path_provider
  • cookie_jar
  • sqflite

Really a lot of, how to do, Google big law left pit, can only rely on oneself at present. Write here a look at iWatch ⌚️, it has been early morning, a sigh “ah I go”… Space is limited. I will answer these questions in “From Flutter Go to Flutter Go Web”. If you want to know how I solve the problems of Flutter- Web (2), please follow me.

Github address for the above case >>>

The last

After several months of precipitation, FlutterGo finally welcomed the second iteration update! Not only did we add the concept of a personal center, but we also provided third-party co-authorization tools, and we completed the development of FlutterGo Web. All these ~ can be found on our official website of FlutterGo!!

Related introduction

🔥 Flutter Go 2.0The upcoming release

Flutter Go 2.0 has been updated with The Flutter-Go Roadmap for 2019 following its release earlier this year.

➤ Come in good condition

  • Official website of Flutter Go (official news, release, study)

  • Flutter Go Web Version (Web Version Learning Help)

    • Online Preview
    • The project address

  • Pull Request submission specification for Flutter Go Widget

  • User center (personal widget case)

    • User login (PassGitHubAccount)
    • Internet search (Internet searchFlutterInformation)
    • Bookmark personal components (save to remote)
    • Feedback and suggestions (APP onlineISSUES)
    • Sharing link (APP Sharing)

  • Go – cli tool

    • Flutter Go 的 pull requesttool
    • Command line generationFlutter Go WidgetStandard common templates
    • markdownDynamic generation of templates (after merging into the Master branch)

  • The official APP of Flutter Go is automatically upgraded

Joint Construction by the Three Parties

Because flutter content updates quickly. We can’t enrich the project any faster. If you are willing to contribute to the development and learning of FLUTTER in China, please refer to our description of flutter co-construction. We will contribute the co-creator’s profile picture and name to our official website.

Thanks again to all of you who have submitted your PR

FlutterGo looks forward to our cooperation

For pr details and procedures, refer to the FlutterGo README or pin scan code directly into the group