Today I documented the development of the FlutterWeb plugin. There are a lot of tutorials online. But I thought it would be nice to put all the ends of a plugin into one project, so I tried:

First, create a New Flutter plugin project using AndroidStudio. Then let’s use Web Chrome to run it. The interface is as follows:

Obviously, WebPlugin platformVersion, on the Web is not implemented.

In pubspec.yaml, find dependencies and add the following code:

flutter_web_plugins:
    sdk: flutter
Copy the code

Below Platforms, add web dependent classes under MacOS

plugin:
    platforms:
      android:
        package: com.test.web_plugin
        pluginClass: WebPlugin
      ios:
        pluginClass: WebPlugin
      macos:
        pluginClass: WebPlugin
Copy the code

Revised:

 plugin:
    platforms:
      android:
        package: com.test.web_plugin
        pluginClass: WebPlugin
      ios:
        pluginClass: WebPlugin
      macos:
        pluginClass: WebPlugin
      web:
        pluginClass: WebPlugin        # Corresponds to the class name of the Web plug-in
        fileName: web/web_plugin.dart The directory corresponding to the Web plug-in
Copy the code

Dart /web_plugin.dart /web_plugin.dart /web_plugin.dart /web_plugin.dart

import 'package:flutter/services.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

class WebPlugin {
  static void registerWith(Registrar registrar) { // Add the default static method just like the android plugin
    final MethodChannel channel = new MethodChannel("web_plugin".const StandardMethodCodec(), registrar.messenger); / / communications channel
    final webPlugin = WebPlugin();
    channel.setMethodCallHandler(webPlugin.handler);// Message processing
  }

  Future<dynamic> handler(MethodCall call) {
    if (call.method == 'getPlatformVersion') {
      return Future.value('Chrome 11');
    }
    return null; }}Copy the code

And then let’s restart the Web and see,

But now that it’s fake data, let’s try to return real browser information and see how dart works:

First we import import ‘dart: HTML ‘as HTML; Then we can use HTML to get some information or do something with it.

Future<dynamic> handler(MethodCall call) {
    if (call.method == 'getPlatformVersion') {
      return Future.value(html.window.navigator.appVersion);
    }
    return null;
  }
Copy the code

Results obtained:

So far, our plug-in is almost ready.

For those of you who are web savvy, take a look at the HTML class and test it out.