集成Flutter到现有项目，并实现使用单个FlutterEngine管理多个入口

文章示例代码已上传 GitHub，地址：https://github.com/chenglei1986/reuse_a_flutter_engine_across_screens

1 准备工作

集成 Flutter 到现有项目具体步骤请参考官方文档。

如果你的项目是基于 Flutter stable 分支（在这篇文章完成当时的版本为 1.17.1-stable），那么 Android 项目 Application 模块的文件夹名称必须为 app，否则编译报错。

如果有一个工程下有多个 Application 模块，那么请将 Flutter 切换到 dev 或 master 分支，并在 gradle.properties 文件中加入

# 指定 app 模块的目录名称为 xxx
flutter.hostAppProjectName=xxx

然后再参考 Adding a Flutter screen to an Android app，编写 Android 端代码。

完成 Step 1 和 Step 2 就能运行 Flutter 代码了，只是每次启动都很慢，而且 Activity 切换动画会有肉眼可见的黑色背景，纯 Flutter 项目可以将启动页的 windowBackground 设置成启动图来提升用户体验，对于混合项目没有帮助。

此时再看 Step 3，翻一下文档相应部分如下：

默认情况下，每个 FlutterActivity 都会创建一个自己的 FlutterEngine。而每个 FlutterEngine 都会有一个明显的 “预热” 时间。这就意味着启动标准的 FlutterActivity ，在 Flutter 界面显示之前，将会有一个短暂的延迟。为了将这个延迟最小化，你可以在启动 FlutterActivity 之前对 FlutterEngine 进行预加载，之后使用这个预加载的 FlutterEngine 即可。

框架提供了方法，可以将 FlutterEngine 缓存起来，这样每次启动 FlutterActivity 都是“热启动”，用户体验上与原生基本没有差别。

至此，对于文档中提及的混合开发方案中的所有步骤都已经完成。此时我们还面临一个最大的问题就是，缓存了 FlutterEngine 之后，无法指定入口，这一点文档也有提到，大意就是：

FlutterEngine 是独立于 FlutterActivity 的，FlutterEngine 会在预热的时候就执行一部分 Dart 代码，如果等到 FlutterActivity 启动的时候再指定入口就晚了。

2 解决多个 Flutter 页面的入口问题

Flutter 混合开发，一般都是使用 Flutter 来开发部分模块，所以原生界面启动在前。除非所有使用 Flutter 开发的模块都从同一个入口进入，否则多入口是无法逃避的问题。

上面提到 FlutterEngine 会在预热的时候就开始执行 Dart 代码，这就意味着，同一个 FlutterEngine 只能指定一个入口，所以我自己在做项目的时候最先想到的是，我可以缓存多个 FlutterEngine 啊。

2.1 一次预热多个 FlutterEngine

核心代码如下：

/**
 * 初始化 FlutterEngine
 *
 * @param context 上下文
 * @param routes  路由名称列表
 */
void initFlutterEngine(Context context, List<String> routes) {
    for (String route : routes) {
        FlutterEngine flutterEngine = new FlutterEngine(context, null, false);
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        // 使用路由名称作为 engineId
        FlutterEngineCache.getInstance().put(route, flutterEngine);
    }
}

这个方案可以解决问题，但是面临最大的风险与挑战就是，每初始化一个 FlutterEngine 都要消耗相应的内存。

根据文档，在 Flutter v1.10.3 版本上使用 2015 年的低端手机测试，Android 系统中每加载一个 FlutterEngine 需要 42 MB 内存，渲染首页需要约 12MB 内存。随着版本的升级，预计消耗内存会更多。

随着项目的迭代升级，功能模块越来越多，这个方案的风险就越大。

2.2 复用 FlutterEngine

2.2.1 改造 Flutter 入口代码

一个典型的 Flutter 程序如下

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Default Home Page'),
      ),
      body: Container(),
    );
  }
}

其中 MyApp 是继承自 StatelessWidget，所以是无法改变状态的，我们要进行如下改造：

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

/// 继承自 StatefulWidget
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  /// 实例化一个 MethodChannel
  MethodChannel _methodChannel = MethodChannel('com.example/method_channel');
  /// Flutter 页面入口
  Widget _initRoute = DefaultHomePage();

  @override
  void initState() {
    super.initState();
    // 设置 MethodCallHandler 接收来自 Android 的消息
    _methodChannel.setMethodCallHandler((call) async {
      switch (call.method) {
        case 'setInitRoute':
          _handleInitRouteMethodCall(call);
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // home 设置成变量，当接收到 Android 发过来的路由时，
      // 将 home 修改以实现入口的切换
      home: _initRoute,
    );
  }
  
  /// 处理来自 setInitRoute 的消息
  void _handleInitRouteMethodCall(MethodCall call) async {
    switch (call.arguments) {
      case '/page_a':
        _initRoute = PageA();
        break;
      case '/page_b':
        _initRoute = PageB();
        break;
      default:
        _initRoute = DefaultHomePage();
        break;
    }
    /// 更新界面
    setState(() {});
  }
}

/// 默认入口，空白即可
class DefaultHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 因为是路由栈的最底层，所以不会自动处理返回，我们要自己处理
        leading: GestureDetector(
          child: Icon(Icons.arrow_back),
          // 退出 FlutterActivity，iOS 不支持，要单独处理
          onTap: () => SystemNavigator.pop(),
        ),
        title: Text('Default Home Page'),
      ),
      body: Container(),
    );
  }
}

/// page_a.dart
class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          child: Icon(Icons.arrow_back),
          onTap: () => onBackPressed(context),
        ),
        title: Text('Page A'),
      ),
      body: Container(),
    );
  }

  void onBackPressed(BuildContext context) {
    NavigatorState navigatorState = Navigator.of(context);
    if (navigatorState.canPop()) {
      navigatorState.pop();
    } else {
      SystemNavigator.pop();
    }
  }
}

/// page_b.dart
class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          child: Icon(Icons.arrow_back),
          onTap: () => onBackPressed(context),
        ),
        title: Text('Page B'),
      ),
      body: Container(),
    );
  }

  void onBackPressed(BuildContext context) {
    NavigatorState navigatorState = Navigator.of(context);
    if (navigatorState.canPop()) {
      navigatorState.pop();
    } else {
      SystemNavigator.pop();
    }
  }
}

主要思路是把 MyApp 改成 StatefulWidget，同时创建一个 MethodChannel 用于接收原生 App 发送的消息，当启动 FlutterActivity 时，使用该 MethodChannel 将要进入的界面路由发送过来，然后将 DefaultHomePage 替换掉。

为此我们还要自定义一个 FlutterActivity。

2.2.2 改造 Android 端代码

public class AndroidFlutterActivity extends FlutterActivity {

    static final String EXTRA_CACHED_ENGINE_ID = "cached_engine_id";
    static final String EXTRA_ROUTE = "extra_route";
    static final String EXTRA_DESTROY_ENGINE_WITH_ACTIVITY = "destroy_engine_with_activity";

    public static void open(Context context, String route) {
        Intent intent = new Intent(context, AndroidFlutterActivity.class)
                .putExtra(EXTRA_CACHED_ENGINE_ID, "default_engine_id")
                .putExtra(EXTRA_ROUTE, route)
                // Activity 销毁时保留 FlutterEngine
                .putExtra(EXTRA_DESTROY_ENGINE_WITH_ACTIVITY, false);
        context.startActivity(intent);
    }

    @Override
    public void onFlutterUiDisplayed() {
        super.onFlutterUiDisplayed();

        // 设置 Flutter 界面入口，注意不要在 onCreate 方法中调用，否则
        // Flutter 入口不会更新。
        String route = getIntent().getStringExtra(EXTRA_ROUTE);
        FlutterTools.setInitRoute(route);
    }
}

需要注意得是，AndroidFlutterActivity 向 Flutter 发送入口路由的时机。因为 FlutterEngine 在预加载的时候并不会执行 Flutter 首页的全部代码，即在界面展示出来之前，Widget 的 build 方法不会执行，所以如果在 AndroidFlutterActivity onCreate 方法中向 Flutter 发送消息，虽然能够收到，但是时机过早，当 Flutter 页面真正展示之后，还是会展示 DefaultHomePage。

public class FlutterTools {

    public static final String ENGINE_ID = "default_engine_id";

    public static final String ROUTE_PAGE_A = "/page_a";
    public static final String ROUTE_PAGE_B = "/page_b";

    private static final String METHOD_CHANNEL = "com.example/method_channel";

    private static FlutterEngine sFlutterEngine;
    private static MethodChannel sMethodChannel;

    public static void preWarmFlutterEngine(Context context) {
        if (null == sFlutterEngine) {
            sFlutterEngine = new FlutterEngine(context);
            sFlutterEngine.getDartExecutor().executeDartEntrypoint(
                    DartExecutor.DartEntrypoint.createDefault()
            );
            sMethodChannel = new MethodChannel(sFlutterEngine.getDartExecutor(), METHOD_CHANNEL);
            FlutterEngineCache.getInstance().put(ENGINE_ID, sFlutterEngine);
        }
    }

    public static void setInitRoute(String route) {
        sMethodChannel.invokeMethod("setInitRoute", route);
    }

    public static void destroyEngine() {
        if (sFlutterEngine != null) {
            sFlutterEngine.destroy();
        }
    }

}

原生 App 入口

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setSupportActionBar(findViewById(R.id.tool_bar));
        initViews();

        // 预加载 FlutterEngine
        FlutterTools.preWarmFlutterEngine(this);
    }

    private void initViews() {
        findViewById(R.id.button_page_a).setOnClickListener(this);
        findViewById(R.id.button_page_b).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button_page_a:
                AndroidFlutterActivity.open(this, FlutterTools.ROUTE_PAGE_A);
                break;

            case R.id.button_page_b:
                AndroidFlutterActivity.open(this, FlutterTools.ROUTE_PAGE_B);
                break;

            default:
                break;
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        // 释放资源
        FlutterTools.destroyEngine();
    }
}

最后看效果。模拟器上会有短暂的白屏，真机上基本看不出来。

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