新贵 Flutter （F）与 Android 原生通讯

flutter 谁在用 Flutter

想要实际将 Flutter 应用到产品，有许多因素我们需要考虑，就是 Flutter 与原生平台交互。看一看 Flutter 是如何和 Android 原生进行通讯的。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _message = "No messages yet...";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: new ListView(children: <Widget>[ new ListTile(
        title: new Text(_message),
      ),]
      ),
    );
  }
}

我们写一个在普通不过的应用，在页面显示一条信息 _message 为 No messages yet...。

图

今天要做的将消息发送给 Android 端，然后再从 Android 端将消息返回来。也就是一来一回完成一个通讯。

设置 MethodChannel

static const platform = const MethodChannel('demo.zidea.com/info');

• platform 指向的是 Android 或 Ios 平台
  要想使用 MethodChannel 需要引入一个依赖。给方法通道一个名称demo.zidea.com/info。这个名称很重要我们先记在心里。因为要接收数据时候我们需要这个通道名称。

import 'package:flutter/services.dart';

  Future<String> _getMessage() async{
    String value;
    try {
      value = await platform.invokeMethod("getMessage");
    }catch(e){
      print(e);
    }
    return value;
  }

然后在通道上触发一个方法 getMessage 因为这方法被调用是在 Android 端发生，所以是异步的返回一个 Feture 。调用 Android 的 getMessage 返回值 Future 类似 js promise 随意调用方法 _getMessage 返回 Future 。通过 Future 我们可以获取从 Android 发送过来值。

  @override
  void initState() {
    // TODO: implement initState
    _getMessage().then((String message){
      setState(() {
        _message = message;
      });
    });
    super.initState();
  }

图

在项目中 Android 目录右键单击在弹出菜单上选择 Flutter > Open Android module in Android Studio 如下图

图

会在 Android Studio 打开这个项目。然后选择 MainActivity 类。

public class MainActivity extends FlutterActivity {
  private static final String CHANNEL = "demo.zidea.com/info";
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);

    new MethodChannel(getFlutterView(),CHANNEL)
      .setMethodCallHandler(new MethodChannel.MethodCallHandler() {
        @Override
        public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
          if(methodCall.method.equals("getMessage")){
            String message = "Android say hey.";
            result.success(message);
          }
        }
      });
  }
}

在 onCreate 方法中新建一个 MethodChannel 建立一个和 Flutter 通讯的通道，getFlutterView() 是获取 Flutter 视图，第二参数是通道名称需要和之前 demo.zidea.com/info 保持一致，然后设置方法回调函数，接收一个匿名类作为回调函数。在 onMethodCall 监听调用方法的名称如果是 getMessage 我们返回结构 result 返回信息给Flutter。上面这套应该不难理解。

图

  Future<String> _getMessage() async{
    
    var sendMap = <String, dynamic>{
      'from' : 'Zidea',
    };
    
    String value;
    try {
      value = await platform.invokeMethod("getMessage",sendMap);
    }catch(e){
      print(e);
    }
    return value;
  }

在调用 Android 方法时候我们也可以从 Flutter 向 Android 端传递参数。

new MethodChannel(getFlutterView(),CHANNEL)
      .setMethodCallHandler(new MethodChannel.MethodCallHandler() {
        @Override
        public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {

          final Map<String,Object> arguments =  methodCall.arguments();

          if(methodCall.method.equals("getMessage")){
            String from = (String) arguments.get("from");
            String message = "Android say hey. " + from ;
            result.success(message);
          }
        }
      });

图 flutter