Android与Flutter桥接指南

2019-03-29 本文已影响0人未子涵

Flutter官方文档

这篇指南是针对Android开发者的，目的是让一个没有接触过Flutter的Android程序员快速开发出Flutter插件，所以笔者默认各位读者已经有了JDK、SDK、Android Studio等开发环境和IDE。

Flutter环境搭建

1.下载Flutter SDK

Flutter SDK Archive

2.解压下载到的压缩包

解压路径如D:\env\flutter，不要解压到Program Files目录下，因为操作该目录需要更高的权限。

3.安装Flutter

进入flutter根目录，双击flutter_console.bat，等待flutter安装完成。

tips：

如果想要在一般的cmd中直接使用flutter commands，需要配置环境变量：
将你的flutter\bin路径添加到环境变量path中
然后重新打开cmd，运行flutter help确认结果

4.确认Flutter环境

运行以下命令：

flutter doctor

一般输出如下：

C:\Users\wxj>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[âˆš] Flutter (Channel stable, v1.2.1, on Microsoft Windows [Version 6.1.7601],
    locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)

    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Android Studio (version 2.3)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Android Studio (version 3.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

C:\Users\wxj>

可见检查出了4个问题，除了Android Studio没有安装flutter插件的提示外，其他没什么需要注意的。

5.Android Studio安装Flutter插件

启动AS
进入插件页面 (Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux).
选择Browse repositories, 搜索flutter，安装Flutter plugin
安装完成后重启AS

测试Flutter开发环境

创建一个test工程，测试flutter开发环境。

选择File > New Flutter Project
选择Flutter application作为应用类型
在Flutter SDK Path一栏指定你的flutter SDK安装路径
输入项目名称，点击下一步
等待AS创建工程
运行main.dart(第一次运行需要较长时间的编译)

运行成功后设备上会看到如下页面

说明flutter开发环境已就绪。接下来就可以开发你的flutter插件了。

开发你的Flutter项目

在开始前，首先要确定你是要开发一个dart package还是一个plugin package，我们是要为既存的sdk开发一个flutter插件，所以是plugin package。

创建项目有两种方式：命令行和 Android Studio/create flutter project，下面是命令行创建，你也可以通过Android Studio的UI创建，注意在创建时选对你要创建Dart package还是plugin package即可。

dart package

Dart package是通过 --template=package 创建的:

 flutter create --template=package hello

该命令会创建一个 hello/ 目录，其中包括:

lib/hello.dart:
该包的Dart代码.
test/hello_test.dart:
该包的单元测试代码.

plugin package

创建package

plugin package是通过 --template=plugin 创建的。

 flutter create --org com.example --template=plugin hello

上述命令会创建一个 hello/ 文件夹，其内容如下：

lib/hello.dart:
你要实现的插件的dart api
android/src/main/java/com/example/hello/HelloPlugin.java:
插件api的安卓平台实现
ios/Classes/HelloPlugin.m:
插件api的ios平台实现
example/:
flutter的示例应用

默认使用OC和java，如果想使用swift或者kotlin，那么可以指定，ios用-i，android用-a：

flutter create --template=plugin -i swift -a kotlin hello

接下来就可以开发你的flutter plugin了，最后你可能会想要写一些文档，可以参考：
Adding documentation

发布到pub.dartlang.org

开发完成后你可以将你的插件发布到Pub site，方便用户使用。

在发布之前，先确认一下pubspec.yaml文件中关于plugin的设置是否正确：

# The following section is specific to Flutter.
flutter:
  # This section identifies this Flutter project as a plugin project.
  # The androidPackage and pluginClass identifiers should not ordinarily
  # be modified. They are used by the tooling to maintain consistency when
  # adding or updating assets for this project.
  plugin:
    androidPackage: cn.smssdk.flutter
    pluginClass: MobsmsPlugin

这里要指定正确的plugin的包名和类名，androidPackage只有android用得到，而pluginClass则是iOS和Android都要用到的，所以类名需要统一。这里的设置会上传到flutter服务器，当用户在线集成你的plugin时，flutter会根据这个设置自动帮用户生成下面这个类：

package io.flutter.plugins;

import io.flutter.plugin.common.PluginRegistry;
import cn.smssdk.flutter.MobsmsPlugin;

/**
 * Generated file. Do not edit.
 */
public final class GeneratedPluginRegistrant {
  public static void registerWith(PluginRegistry registry) {
    if (alreadyRegisteredWith(registry)) {
      return;
    }
    MobsmsPlugin.registerWith(registry.registrarFor("cn.smssdk.flutter.MobsmsPlugin"));
  }

  private static boolean alreadyRegisteredWith(PluginRegistry registry) {
    final String key = GeneratedPluginRegistrant.class.getCanonicalName();
    if (registry.hasPlugin(key)) {
      return true;
    }
    registry.registrarFor(key);
    return false;
  }
}

所以，如果之前没有指定正确的plugin包名和类名，就会导致自动生成的代码中出现错误。

如果是在flutter项目下直接查看java代码，可能会提示import cn.smssdk.flutter.MobsmsPlugin找不到，无法使用相关类，不用在意，你可以"右键flutter项目 → Flutter → Open Android Module in Android Studio"，直接打开flutter的安卓项目，AS会自动下载相关依赖（包括插件中的module），在该视图下编译就不会有报错了，并且这两边会自动同步，任意一边运行项目都会产生同一个flutter apk。

通过以下命令，验证项目没有问题：

flutter packages pub publish --dry-run

通过以下命令发布：

flutter packages pub publish

用户如何使用你的插件

以mobsms插件的集成为例。

1. dart代码集成

在 hello/pubspec.yaml 中添加以下代码:

dependencies:
  mobsms: ^0.0.3

在你项目的Dart中添加以下代码：

 import 'package:mobsms/mobsms.dart'

这样，就可以在你的main.dart中使用mobsms plugin中定义的dart api了。

2. 平台相关（android/ios）代码集成

Android

在 hello/android/build.gradle中添加:

android {
    // lines skipped
    dependencies {
        provided rootProject.findProject(":mobsms")
    }
}

这样就可以在你的hello/android/src下的类中import cn.smssdk.flutter.MobsmsPlugin并使用MobsmsPlugin中的api了。

Java代码仍然建议在Android视图下查看，不要在Flutter视图下查看。

iOS

在hello/ios/hello.podspec中:

Pod::Spec.new do |s|
  # lines skipped
  s.dependency 'mob_smssdk'

这样就可以在你的hello/ios/Classes下的类中#import "MobsmsPlugin.h"并使用MobsmsPlugin中的api了。

更多信息可参考 Handling package interdependencies

Demo

如果你是要开发一个Plugin Package，可以参考 mobsms：
SMSSDK-for-Flutter

如果你要开发一个Dart Package，需要集成第三方Plugin Package，可以参考：
sms_flutter_tester