Flutter混合开发：Android接入Flutter

前言

Flutter.png

Flutter Google推出已经已经一年多了，单个 Flutter 项目的开发流程已经很成熟了。对与个人开发者来说使用 Flutter 开发一个跨平台的App挺有意思。但是对于现有的项目改造来说还是不建议，Flutter 中的控件还没有完全能满足我们的要求，我们需要解决这个问题会消耗我们大量的研发资源。

虽然 Flutter 无法接入我们的项目，但是我们可以尝试者去模仿 Flutter 在项目中的使用场景。下边我讲讲我在 Android 和 Flutter 的混合开发实践的躺坑之旅。

官方指导

Add Flutter to existing apps

实践：

创建Flutter模块

如果你存在一个 Android app 的路径是 some/path/MyApp ，你希望创建你的 Flutter 项目作为子模块：

代码语言：javascript复制

$ cd some/path/
# flutter create my_flutter是创建纯Flutter项目的命令
$ flutter create -t module my_flutter

你能得到一个创建好的 some/path/my_flutter 的 Flutter 项目，它包含了一部分Dart 的代码。其中有一个 .android/ 的隐藏的子文件夹，它包装了Android库中的模块项目。

使主app依赖Flutter模块

在主App的 setting.gradle 文件中包含 Flutter 模块作为子模块。

代码语言：javascript复制

// MyApp/settings.gradle
include ':app'                                     // assumed existing content
setBinding(new Binding([gradle: this]))                                 // new
evaluate(new File(                                                      // new
  settingsDir.parentFile,                                               // new
  'my_flutter/.android/include_flutter.groovy'                          // new
))

这个绑定和脚本评估允许 Flutter 模块可以包含自己（作为:flutter），在你自己的 setting.gradle 文件中，任何 Flutter 插件可以作为模块使用（作为 :package_info , :video_player 等）。

在你的app采用 implementation 方式依赖 Flutter 模块：

代码语言：javascript复制

// MyApp/app/build.gradle
:
dependencies {
  implementation project(':flutter')
  :
}

在你的Java代码中使用Flutter模块

使用 Flutter 模块的Java接口 Flutter.createView ，可以在你的app中添加 Flutter View 。

addView

add.png

代码语言：javascript复制

// MyApp/app/src/main/java/some/package/MainActivity.java
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout frameLayout = findViewById(R.id.flutter_root);
        View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "root1");
        FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
        frameLayout.addView(flutterView, layout);
    }
}

setContentView

all.png

代码语言：javascript复制

// MyApp/app/src/main/java/some/package/MainActivity.java
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "root1");
        FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
        setContentView(flutterView, layout);
    }
}

fragment

也可以创建一个负责管理自己生命周期的FlutterFragment。

代码语言：javascript复制

//io.flutter.facade.Flutter.java
public static FlutterFragment createFragment(String initialRoute) {
    final FlutterFragment fragment = new FlutterFragment();
    final Bundle args = new Bundle();
    args.putString(FlutterFragment.ARG_ROUTE, initialRoute);
    fragment.setArguments(args);
    return fragment;
}
//io.flutter.facade.FlutterFragment.java
public class FlutterFragment extends Fragment {
    public static final String ARG_ROUTE = "route";
    private String mRoute = "/";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mRoute = getArguments().getString(ARG_ROUTE);
        }
    }

    @Override
    public void onInflate(Context context, AttributeSet attrs, Bundle savedInstanceState) {
        super.onInflate(context, attrs, savedInstanceState);
    }

    @Override
    public FlutterView onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return Flutter.createView(getActivity(), getLifecycle(), mRoute);
    }
}

dart代码交互

上面我们使用了 "route1" 字符串告诉 Flutter 模块中的 Dart 代码展示那个 widget 。在 Flutter 模块项目的模板文件 lib/main.dart 中的可以使用window。defaultRouteName 作为提供路由选择的字符串，通过 runApp 决定创建那个 widget 。

代码语言：javascript复制

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

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'route1':
      return SomeWidget(...);
    case 'route2':
      return SomeOtherWidget(...);
    default:
      return Center(
        child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
      );
  }
}

构建和运行你的app

一般在使用 Android Studio 中，你可以构建和运行 Myapp ，完全和在添加Flutter模块依赖项之前相同。也可以同样的进行代码的编辑、调试和分析。

报错和解决

整个接入的过程一般是不会有问题的，但是呢？我们不按照官方提供的文档上自己一顿操作可能会产生其他的问题。

关联项目报错

代码语言：javascript复制

AILURE: Build failed with an exception.

* Where:
Settings file '/Users/tanzx/AndroidStudioWorkSapce/GitHub/MyApp/settings.gradle' line: 6

* What went wrong:
A problem occurred evaluating settings 'MyApp'.
> /Users/tanzx/AndroidStudioWorkSapce/GitHub/MyApp/my_flutter/.android/include_flutter.groovy (/Users/tanzx/AndroidStudioWorkSapce/GitHub/MyApp/my_flutter/.android/include_flutter.groovy)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s

报错原因：

将创建的 Flutter 模块放在了 MyApp 文件夹的内部，地址搞错。

解决方法：

将 Flutter 放在 MyApp 的外层；
将 setting.gradle 配置文件中的， 'my_flutter/.android/include_flutter.groovy' 改为 'MyApp/my_flutter/.android/include_flutter.groovy' ；

作为Android开发人员学习 Flutter 的第一步我们已经完成了，虽然后续的需要了解和学习的还有很多 良好的开始是成功的一半 ，加油~！

flutter ios android dart java

0 人点赞