Flutter与Android Native进行混合开发

氦客

已于 2022-06-02 10:15:42 修改

阅读量2.5k

点赞数 1

分类专栏：跨平台移动开发文章标签： Flutter Native 混合开发调试热加载

于 2019-06-25 17:05:20 首次发布

本文链接：https://blog.csdn.net/EthanCo/article/details/92081278

版权

跨平台移动开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

原生项目集成Flutter

创建Flutter module
添加Flutter module依赖
在Java/Object-c中调用Flutter module
编写Dart代码

1.创建FlutterModule

首先在你的Native项目的上一级目录，运行如下代码

flutter create -t module flutter_module

这样，就会创建一个flutter模块
在这里插入图片描述
我们进入flutter_module，可以发现包含.android和.ios，这两个文件夹是隐藏文件，也是这个flutter_module宿主工程

.android - flutter_module的Android宿主工程
.ios - flutter_module的IOS宿主工程
lib - flutter_module的Dart部分的代码
pubspec.yaml - flutter_module的项目依赖配置文件

因为宿主工程的存在，我们这个flutter_module在不加额外的配置的情况下是可以独立运行的。通过安装了Flutter与Dart插件的Android Studio打开这个flutter_module项目，通过运行按钮是可以直接运行它的

2.添加Flutter module依赖

在我们的原生Android项目的settings.gradle中添加如下代码
这一步是引用flutter工程，添加之后Binding会报红，这个地方不管他

setBinding(new Binding([gradle:this]))
evaluate(new File(settingsDir.parentFile,'flutter_module/.android/include_flutter.groovy'))

然后在app的build.gradle中，添加

dependencies {
	//...
	implementation project(":flutter")
}

Android项目minSdkVersion最低需为16
Android项目需配置使用1.8进行编译 (sourceCompatibility和targetCompatibility)

3.在Java中调用Flutter module

使用Flutter.createView API的方式

	View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "route1");
    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
    layout.leftMargin = 100;
    layout.rightMargin = 200;
    addContentView(flutterView, layout);

使用FlutterFragment的方式

FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
tx.replace(R.id.layout_container, Flutter.createFragment("route1"));
tx.commit();

上面我们使用字符串"route1"来告诉Dart代码在Flutter视图中显示哪个小部件。
Flutter模块项目的lib/main.dart文件需要通过window.defaultRouteName来获取Native指定要显示的路由名，以确定要创建哪个窗口小部件并传递给runApp;

4.编写Dart代码

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

void main() => runApp(MyApp(initParams : window.defaultRouteName));

class MyApp extends StatelessWidget {
  final String initParams;


  const MyApp({Key key,this.initParams}):super(key:key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page',initParams:initParams),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title,this.initParams}) : super(key: key);

  final String title;
  final String initParams;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'initParams:${widget.initParams}',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

运行Android项目，点击FLUTTER FRAGMENT按钮，可以看到
在这里插入图片描述

无论是使用Flutter.createView的方式还是通过Flutter.createFragment的方式，都允许我们在加载Flutter module时传递一个String类型的initialRoute参数，该参数是用作路由名的，但也可以传递相传的其他的参数，比如json类型的数据。