Flutter集成到Android项目三部曲

作者：余天然

本文主要解决3个问题：

  1. 集成Flutter到Android项目,可以打开Flutter的默认页面
  2. 可以跳转到Flutter的指定页面
  3. 可以将Flutter的指定组件嵌入到原生页面，并传递参数

1.集成Flutter到Android

这里，我们以Flutter Module创建一个Flutter工程(flutter)，然后run起来，就可以在.android/Flutter/build/outouts/aar文件夹下面得到这个aar


这里之所以以Flutter Module模式开发，而不是Flutter Application，就是为了得到这个aar。
Flutter Module模式下自动生成的.android文件夹下，才会有这个Flutter文件夹，Flutter Application则没有。
这样的话，我们才可以借用Flutter已经有的生成aar的gradle脚本，不然还得自己去写gradle打包脚本，很容易踩到坑里就爬不起来了。

然后我们再另开一个窗口，新建一个Android工程(flutter_container)，将这个aar复制过去


这里需要注意的一个问题，因为Flutter本身原因，导致复制出来的aar里面缺少icudtl.dat文件，需要我们自己手动复制这个icudtl.dat文件到assets/flutter_shared目录下。

怎么得到这个icudtl.dat文件呢，很简单，解压Flutter工程生成的默认apk即可得到


然后，我们就需要在宿主Android工程里面，建立接收Flutter的Activity了。这里可以借鉴Flutter工程的.android/app目录，核心就是两个：

  1. Application：初始化Flutter
public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        FlutterMain.startInitialization(this);
    }
}
  1. Activity：继承FlutterActivity
/**
 * debug模式原生跳转到flutter界面会出现白屏，release包就不会出现白屏了
 */
public class MainFlutterActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);
  }
}

这样以后，我们就可以跳转这个MainFlutterActivity，实现在Android工程里面进入Flutter工程的默认页面了。

2. 跳转指定页面

上面只是简单集成了Flutter，但是我们知道，我们从Android工程里面跳转Flutter，肯定是需要选择性的跳转指定页面的，不可能只是简单的跳转默认页面就完了，所以，这里需要用到Flutter的静态路由了。

修改Flutter工程的main.dart，定义了两个指定页面的路由：homePage、channelPage

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
      //这种方式不能传递参数，主要是方便原生调用
      routes: <String, WidgetBuilder> {
        'homePage': (BuildContext context) => new HomePage(),
        'channelPage': (BuildContext context) => new ChannelPage(),
      },
    );

  }
}

然后在宿主Android工程下，添加指定页面的容器Activity，通过Flutter.createView来获取指定页面的View

注意，这里的HomeFlutterActivity只需要继承AppCompatActivity 即可，不需要继承FlutterActivity了。

public class HomeFlutterActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FlutterView homePage = Flutter.createView(
                this,
                getLifecycle(),
                "homePage"
        );
        setContentView(homePage);
    }
}

这样以后，我们就可以跳转这个HomeFlutterActivity，实现在Android工程里面进入Flutter工程的指定页面了。

3. 嵌入View并传递参数

上面虽然能够跳转指定页面了，但是很显然，有一个很大的问题：不能传递参数。

这是Flutter的静态路由的一个很大的弊端，虽然通过动态路由可以传递参数和接收返回值，但是动态路由没法给原生调用。

 Navigator.of(context)
                .push<String>(new MaterialPageRoute(builder: (context) {
              return new NextPage(params);
            })).then((String value) {
              setState(() {
                params = value;
              });
            });

有一个Flutter的路由库：Fluro，可以实现静态路由传参，例如这样：

传参

var bodyJson = '{"user":1281,"pass":3041}';
router.navigateTo(context, '/home/$bodyJson');

接收

Router router = new Router();

void main() {
  router.define('/home/:data', handler: new Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return new FluroHomePage(params['data'][0]);
      }));
  runApp(MyApp());
}

但是，这种方式在Flutter内部还行，却无法给原生调用，在原生里面通过Flutter.createView的时候，是没法使用Fluro的，只能是默认的路由。

调研了很多方案，最后，没有办法了，只好采用最笨的方法：通过MethodChannel来传递参数。

这里需要注意的是MethodChannel的调用，应该FlutterView已经创建完成，所以需要通过flutterView.post（new Runnable()）来执行了，直接执行是不会传参给Flutter的。

原生传参给Flutter

原生调用

MethodChannel channel = new MethodChannel(flutterView, CHANNEL);
channel.invokeMethod("invokeFlutterMethod", "hello,flutter", new MethodChannel.Result() {
    @Override
    public void success(@Nullable Object o) {
        Log.i("flutter","1.原生调用invokeFlutterMethod-success:"+o.toString());
    }
    @Override
    public void error(String s, @Nullable String s1, @Nullable Object o) {
        Log.i("flutter","1.原生调用invokeFlutterMethod-error");
    }
    @Override
    public void notImplemented() {
        Log.i("flutter","1.原生调用invokeFlutterMethod-notImplemented");
    }
});

Flutter执行

platform.setMethodCallHandler((handler) {
      Future<String> future=Future((){
        switch (handler.method) {
          case "invokeFlutterMethod":
            String args = handler.arguments;
            print("2.Flutter执行invokeFlutterMethod:${args}");
            return "this is flutter result";
        }
      });
      return future;
    });

Flutter传参给原生

Flutter调用

print("3.Flutter调用invokeNativeMethod");
int result =
    await platform.invokeMethod("invokeNativeMethod", "hello,native");
print("5.收到原生执行结果：${result}");

原生执行

channel.setMethodCallHandler(new MethodChannel.MethodCallHandler() {
    @Override
    public void onMethodCall(MethodCall call, MethodChannel.Result result) {
        switch (call.method) {
            case "invokeNativeMethod":
                String args = (String) call.arguments;
                Log.i("flutter","4.原生执行invokeNativeMethod："+args);
                result.success(200);
                break;
            default:
        }
    }
});

最后贴一下这个传参页面的完整代码吧，主要就是跑了一下：

  1. 原生调用invokeFlutterMethod
  2. Flutter执行invokeFlutterMethod
  3. Flutter调用invokeNativeMethod
  4. 原生执行invokeNativeMethod

Android：

public class ChannelFlutterActivity extends AppCompatActivity {

    private static final String CHANNEL = "com.ezbuy.flutter";

    FlutterView flutterView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_channel);
        FrameLayout frFlutter = findViewById(R.id.fr_flutter);
        flutterView = getFlutterView("channelPage");
        frFlutter.addView(flutterView);
        flutterView.post(new Runnable() {
            @Override
            public void run() {
                initMethodChannel(flutterView);
            }
        });
    }

    public FlutterView initMethodChannel(FlutterView flutterView) {
        MethodChannel channel = new MethodChannel(flutterView, CHANNEL);
        //1.原生调用Flutter方法
        channel.invokeMethod("invokeFlutterMethod", "hello,flutter", new MethodChannel.Result() {
            @Override
            public void success(@Nullable Object o) {
                Log.i("flutter","1.原生调用invokeFlutterMethod-success:"+o.toString());
            }

            @Override
            public void error(String s, @Nullable String s1, @Nullable Object o) {
                Log.i("flutter","1.原生调用invokeFlutterMethod-error");
            }

            @Override
            public void notImplemented() {
                Log.i("flutter","1.原生调用invokeFlutterMethod-notImplemented");
            }
        });
        Log.i("flutter","1.原生调用invokeFlutterMethod");
        //4.Flutter调用原生方法的监听
        channel.setMethodCallHandler(new MethodChannel.MethodCallHandler() {
            @Override
            public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                switch (call.method) {
                    case "invokeNativeMethod":
                        String args = (String) call.arguments;
                        Log.i("flutter","4.原生执行invokeNativeMethod："+args);
                        result.success(200);
                        break;
                    default:
                }
            }
        });
        return flutterView;
    }

    public FlutterView getFlutterView(String initialRoute) {
        return Flutter.createView(
                this,
                getLifecycle(),
                initialRoute
        );
    }
}

Flutter

class ChannelPage extends StatefulWidget {

  ChannelPage();

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

class _ChannelPageState extends State<ChannelPage> {
  static const platform = const MethodChannel('com.ezbuy.flutter');

  String data;

  @override
  void initState() {
    super.initState();
    data ="默认data";
    initChannel();
  }

  @override
  Widget build(BuildContext context) {
    //必须用Scaffold包裹
    return Scaffold(body: new Center(child: new Text(data)));
  }

  void initChannel() {
    platform.setMethodCallHandler((handler) {
      Future<String> future=Future((){
        switch (handler.method) {
          case "invokeFlutterMethod":
            String args = handler.arguments;
            print("2.Flutter执行invokeFlutterMethod:${args}");
            setState(() {
              data = "2.Flutter执行invokeFlutterMethod:${args}";
            });
            invokeNativeMethod();
            return "this is flutter result";
        }
      });
      return future;
    });
  }

  void invokeNativeMethod() async {
    print("3.Flutter调用invokeNativeMethod");
    int result =
        await platform.invokeMethod("invokeNativeMethod", "hello,native");
    print("5.收到原生执行结果：${result}");
  }

}

对啦，我们这节说的是将Flutter以View级别嵌套在一个Android的Activity里面，其实很简单了啊，因为我们通过Flutter.createView创建出来的View和普通的View并没有什么太大的区别，直接addView就可以了，没啥特别操作，比如这个ChannelFlutterActivity,我用的布局文件就是如下所示：

最后的执行效果就是：


其它坑

1. Flutter工程依赖了插件时，宿主Android工程会报找不到插件的原生代码的错误

我的Flutter工程依赖了shared_preferences插件，导致报错：

原因是：Flutter工程导出成aar的时候，没有包含插件里面的原生代码。

解决方案有2种，网上说是不用默认的生成aar的方式，用fataar-gradle-plugin来让生成的flutter.aar直接包含嵌套的插件工程的aar，这就需要修改Flutter工程的.android/Flutter/build.gradle文件了。我试过，结果报了循环依赖的错误，就放弃了，大家如果这个方案走通了，欢迎告知我具体步骤。

我的解决方案：这里我采取了一个简单粗暴直接的方案，直接找到插件的aar，将它也复制到宿主Android工程了。这个插件的aar在这里：


复制到这里：


但是这个方案的弊端就是，以后每一个插件，你都需要复制一下，后期的维护成本是有点高的。不像fataar是一劳永逸，只有flutter.aar这一份aar的。尤其是后期肯定会将aar做成远程依赖，而不再是直接发复制过去，那维护成本就更高了些。

结语

通过上文可以看到，其实Flutter集成到Android项目还是挺方便的（除了FlutterView传参有点麻烦）。至于Flutter如何集成到ios项目，我还没有实践过，还需要和ios的同事探索，如果你在集成到ios项目的过程中，填了哪些坑，有哪些经验总结，欢迎和我们交流。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343