Flutter集成到Android项目三部曲

作者: 小鱼爱记录 | 来源:发表于2019-02-14 15:34 被阅读353次

本文主要解决3个问题：

集成Flutter到Android项目,可以打开Flutter的默认页面
可以跳转到Flutter的指定页面
可以将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目录，核心就是两个：

Application：初始化Flutter

public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        FlutterMain.startInitialization(this);
    }
}

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:
        }
    }
});

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

原生调用invokeFlutterMethod
Flutter执行invokeFlutterMethod
Flutter调用invokeNativeMethod
原生执行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项目的过程中，填了哪些坑，有哪些经验总结，欢迎和我们交流。

Flutter集成到Android项目三部曲

1.集成Flutter到Android

2. 跳转指定页面

3. 嵌入View并传递参数

原生传参给Flutter

Flutter传参给原生

其它坑

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

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

flutter

Flutter