在先前的两篇文章中，介绍了flutter 与原生android通信，以及在原有工程中加入flutter view或是flutter的新页面。
  flutter功能很强大不仅仅有自己的ui库，也能像rn那样封装原生view来实现更好的ui，地图和webview和相机就是觉见的封装。
  在这里先用textview文本组件举例，效果图如图一。

图一

在Android工程中编写并注册原生组件

• 添加原生组件的流程基本是这样的：
  1.实现原生组件PlatformView提供原生view
  2.创建PlatformViewFactory用于生成PlatformView
  3.创建FlutterPlugin用于注册原生组件

实现原生组件PlatformView提供原生view

在这里我定义一个myview的类，实现PlatformView（flutter定义的接口类，如图二）。

图二

MyView.java

import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.platform.PlatformView;

public class MyView implements PlatformView , MethodChannel.MethodCallHandler{
   private final TextView natvieTextView;
   Context context;
   public MyView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
       this.context = context;
       TextView myNativeView = new TextView(context);
       myNativeView.setText("我是来自Android的原生TextView");
       if (params.containsKey("myContent")) {
           String myContent = (String) params.get("myContent");
           myNativeView.setText(myContent);
       }
       this.natvieTextView = myNativeView;
       MethodChannel methodChannel = new MethodChannel(messenger, "plugins.nightfarmer.top/myview_" + id);
       methodChannel.setMethodCallHandler(this);
   }

   @Override
   public View getView() {
       return natvieTextView;
   }

   @Override
   public void dispose() {

   }

   @Override
   public void onMethodCall(MethodCall call, MethodChannel.Result result) {
       if ("setText".equals(call.method)) {
           String text = (String) call.arguments;
           natvieTextView.setText(text);
           result.success(null);
           Intent intent = new Intent();
           intent.setClass(context, LoginActivity.class);
           context.startActivity(intent);
       }
   }
}

MyView中onMethodCall是用于处理flutter与原生view交互的，如果不需要交互的话可以不用实现MethodChannel.MethodCallHandler。

创建PlatformViewFactory用于生成PlatformView

package com.woshiku.flutter_rn.plugin;


import com.woshiku.flutter_rn.factory.MyViewFactory;

import io.flutter.plugin.common.PluginRegistry;

public class MyViewFlutterPlugin {
    public static void registerWith(PluginRegistry registry) {
        final String key = MyViewFlutterPlugin.class.getCanonicalName();
        if (registry.hasPlugin(key)) return;
        PluginRegistry.Registrar registrar = registry.registrarFor(key);
        registrar.platformViewRegistry().registerViewFactory("plugins.woshiku.top/myview", new MyViewFactory(registrar.messenger()));
    }
}

创建FlutterPlugin用于注册原生组件

package com.woshiku.flutter_rn.factory;

import android.content.Context;

import com.woshiku.flutter_rn.view.MyView;

import java.util.Map;

import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.StandardMessageCodec;
import io.flutter.plugin.platform.PlatformView;
import io.flutter.plugin.platform.PlatformViewFactory;

public class MyViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;
    public MyViewFactory(BinaryMessenger messenger) {
        super(StandardMessageCodec.INSTANCE);
        this.messenger = messenger;
    }

    @SuppressWarnings("unchecked")
    @Override
    public PlatformView create(Context context, int id, Object args) {
        Map<String, Object> params = (Map<String, Object>) args;
        return new MyView(context, messenger, id, params);
    }
}

上面代码中使用了plugins.woshiku.top/myview这样一个字符串，这是组件的注册名称，在Flutter调用时需要用到，你可以使用任意格式的字符串。
在MainActivity的onCreate方法中增加注册调用

package com.woshiku.flutter_rn;
import android.content.Intent;
import android.os.Bundle;

import com.woshiku.flutter_rn.plugin.MyViewFlutterPlugin;

import io.flutter.app.FlutterActivity;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
  //channel的名称，由于app中可能会有多个channel，这个名称需要在app内是唯一的。
  private static final String CHANNEL = "woshiku.flutter.io/launchApp";


  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      GeneratedPluginRegistrant.registerWith(this);
      MyViewFlutterPlugin.registerWith(this);
  }
}

在flutter文件中dart写法

import 'dart:ui';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       // This is the theme of your application.
       //
       // Try running your application with "flutter run". You'll see the
       // application has a blue toolbar. Then, without quitting the app, try
       // changing the primarySwatch below to Colors.green and then invoke
       // "hot reload" (press "r" in the console where you ran "flutter run",
       // or simply save your changes to "hot reload" in a Flutter IDE).
       // Notice that the counter didn't reset back to zero; the application
       // is not restarted.
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);

 // This widget is the home page of your application. It is stateful, meaning
 // that it has a State object (defined below) that contains fields that affect
 // how it looks.

 // This class is the configuration for the state. It holds the values (in this
 // case the title) provided by the parent (in this case the App widget) and
 // used by the build method of the State. Fields in a Widget subclass are
 // always marked "final".

 final String title;

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int _counter = 0;
 static const platform = const MethodChannel('woshiku.flutter.io/launchApp');

 Future<Null> launchLogin() async {
   try {
     final String result = await platform.invokeMethod('launchLogin');
     print(result);
   } on PlatformException catch (e) {
   }
 }

 void _incrementCounter() {
   setState(() {
     // This call to setState tells the Flutter framework that something has
     // changed in this State, which causes it to rerun the build method below
     // so that the display can reflect the updated values. If we changed
     // _counter without calling setState(), then the build method would not be
     // called again, and so nothing would appear to happen.
     _counter++;
     //setMyViewText('woshiku'+_counter.toString());
     print(window.defaultRouteName);
     //launchLogin();
   });
 }

 MethodChannel _channel;

 void onMyViewCreated(int id) {
   _channel = new MethodChannel('plugins.woshiku.top/myview_$id');
 }

 Future<void> setMyViewText(String text) async {
   assert(text != null);
   return _channel.invokeMethod('setText', text);
 }

 @override
 Widget build(BuildContext context) {
   // This method is rerun every time setState is called, for instance as done
   // by the _incrementCounter method above.
   //
   // The Flutter framework has been optimized to make rerunning build methods
   // fast, so that you can just rebuild anything that needs updating rather
   // than having to individually change instances of widgets.
   return Scaffold(
     appBar: AppBar(
       // Here we take the value from the MyHomePage object that was created by
       // the App.build method, and use it to set our appbar title.
       title: Text(widget.title),
     ),
     body: Center(
       // Center is a layout widget. It takes a single child and positions it
       // in the middle of the parent.
       child: Column(
         // Column is also a layout widget. It takes a list of children and
         // arranges them vertically. By default, it sizes itself to fit its
         // children horizontally, and tries to be as tall as its parent.
         //
         // Invoke "debug painting" (press "p" in the console, choose the
         // "Toggle Debug Paint" action from the Flutter Inspector in Android
         // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
         // to see the wireframe for each widget.
         //
         // Column has various properties to control how it sizes itself and
         // how it positions its children. Here we use mainAxisAlignment to
         // center the children vertically; the main axis here is the vertical
         // axis because Columns are vertical (the cross axis would be
         // horizontal).
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'You have pushed the button this many times lala:',
           ),
           Text(
             '$_counter',
             style: Theme.of(context).textTheme.display1,
           ),
           Container(
             width: 200,
             height: 100,
             child: AndroidView(
               viewType: 'plugins.woshiku.top/myview',
               creationParams: {
                 "myContent": "通过参数传入的文本内容,I am 原生view",
               },
               creationParamsCodec: const StandardMessageCodec(),
               onPlatformViewCreated: this.onMyViewCreated,
             ),
           )
         ],
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: _incrementCounter,
       tooltip: 'Increment',
       child: Icon(Icons.add),
     ), // This trailing comma makes auto-formatting nicer for build methods.
   );
 }
}

其中

Container(
              width: 200,
              height: 100,
              child: AndroidView(
                viewType: 'plugins.woshiku.top/myview',
                creationParams: {
                  "myContent": "通过参数传入的文本内容,I am 原生view",
                }
              ),
  )

因为只是实现了Android平台，所以这里直接调用了AndroidView，如果你是双平台的实现，则可以通过引入package:flutter/foundation.dart包，并判断defaultTargetPlatform是TargetPlatform.android还是TargetPlatform.iOS来引入不同平台的实现。

给原生view增加参数

creationParams传入了一个map参数，并由原生组件接收，creationParamsCodec传入的是一个编码对象这是固定写法。对就原生view的写法，不过只个只可用于初始化，后面如果要改动参数，文本是无法改变，所以在这里要入通信功能。

public class MyView implements PlatformView {
    private final TextView natvieTextView;
    Context context;
    public MyView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.context = context;
        TextView myNativeView = new TextView(context);
        myNativeView.setText("我是来自Android的原生TextView");
        if (params.containsKey("myContent")) {
            String myContent = (String) params.get("myContent");
            myNativeView.setText(myContent);
        }
        this.natvieTextView = myNativeView;
      
    }

    @Override
    public View getView() {
        return natvieTextView;
    }

    @Override
    public void dispose() {

    }
    }
}

通过MethodChannel与原生组件通讯

public class MyView implements PlatformView , MethodChannel.MethodCallHandler{
    private final TextView natvieTextView;
    Context context;
    public MyView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.context = context;
        TextView myNativeView = new TextView(context);
        myNativeView.setText("我是来自Android的原生TextView");
        if (params.containsKey("myContent")) {
            String myContent = (String) params.get("myContent");
            myNativeView.setText(myContent);
        }
        this.natvieTextView = myNativeView;
        MethodChannel methodChannel = new MethodChannel(messenger, "plugins.nightfarmer.top/myview_" + id);
        methodChannel.setMethodCallHandler(this);
    }

    @Override
    public View getView() {
        return natvieTextView;
    }

    @Override
    public void dispose() {

    }

    @Override
    public void onMethodCall(MethodCall call, MethodChannel.Result result) {
        if ("setText".equals(call.method)) {
            String text = (String) call.arguments;
            natvieTextView.setText(text);
            result.success(null);
            //下面是只己的其它尝试，不用拷备
            Intent intent = new Intent();
            intent.setClass(context, LoginActivity.class);
            context.startActivity(intent);
        }
    }
}

对应dart代码

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
 

  MethodChannel _channel;

  void onMyViewCreated(int id) {
    _channel = new MethodChannel('plugins.woshiku.top/myview_$id');
  }

  Future<void> setMyViewText(String text) async {
    assert(text != null);
    return _channel.invokeMethod('setText', text);
  }

  @override
  Widget build(BuildContext context) {
  
    return Scaffold(
      appBar: AppBar(
    
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
 
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times lala:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            Container(
              width: 200,
              height: 100,
              child: AndroidView(
                viewType: 'plugins.woshiku.top/myview',
                creationParams: {
                  "myContent": "通过参数传入的文本内容,I am 原生view",
                },
                creationParamsCodec: const StandardMessageCodec(),
                onPlatformViewCreated: this.onMyViewCreated,
              ),
            )
          ],
        ),
      )
    );
  }
}

如果要改变文字内容调用setMyViewText,由flutter回给给原生view然后做出文本的改变。