We know that Flutter can be co-developed with native Android or iOS, but can Flutter be co-developed with native H5?

The answer: Yes!

First, I will take a webpage background, 2D is too common, so I will take three. js and give it a whole 3D earth rotation

Unpretentious and boring

    // Global variables
    let camera, scene, renderer;
    / / the camera
    camera = new THREE.PerspectiveCamera(75.window.innerWidth / window.innerHeight, 1.100000);
    camera.position.set(15.5.5);
    / / the scene
    scene = new THREE.Scene();
    // Global lighting
    const ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);
    // Material loading
    let loader = new THREE.TextureLoader();
    / / picture stickers from https://www.solarsystemscope.com/textures/
    // Space background (starry sky)
    let geoSpace = new THREE.SphereGeometry(10000.32.32);
    let spaceMaterial = new THREE.MeshBasicMaterial({
      map: loader.load('img/star.jpg')});let space = new THREE.Mesh(geoSpace, spaceMaterial);
    space.material.side = THREE.BackSide;
    scene.add(space);
    / / the earth
    let geoEarth = new THREE.SphereGeometry(5.40.400);
    let earthMaterial = new THREE.MeshPhongMaterial({
      map: loader.load('img/earth.jpg')});let earth = new THREE.Mesh(geoEarth, earthMaterial);
    scene.add(earth);
    / / the clouds
    let geoCloud = new THREE.SphereGeometry(5.32.40.400);
    let cloudMaterial = new THREE.MeshPhongMaterial({
      map: loader.load('img/cloud.jpg'),
      transparent: true.opacity: 0.5
    });
    let cloud = new THREE.Mesh(geoCloud, cloudMaterial);
    scene.add(cloud);
    / / rendering
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
Copy the code

OK, we have the background, now bring in the Flutter and make a mask for it

Well, now is not a little feeling ✌️

The Flutter now interacts a little less with native H5. Let’s deal with Dart and JS intermodulation

We can even embed components from H5 into Flutter, infinite nesting dolls

PS: I won’t go into details. If you are interested, you can go to the official JS libraryThe document

Dart native H5 development

Dart can not only interoperate with native JS, but can also be used to write native web applications.

Let’s take a look at what a Dart version of Todo List looks like from 2012

As you can see, you can manipulate the WEB DOM in Dart, just like you can query dom elements with JS

But the Dart language’s strong typing is more dynamic and flexible than JS’s, which can be called ❤️

Dart can also be used to write vue, React, angular, etc.

Dart crawlers are pretty cool on the server

Hahaha, magical knowledge it grows 🌚