android原生集成flutter,Flutter 48: 图解 Android 原生集成 Flutter Module

小菜接触了 Flutter 一段时间,但与原生交互方面还未曾接触,今天根据 官方文档 学习一下 Android 原生如何集成最基本的 Flutter Module;

集成方式

1. 新建 Android Project

小菜为了测试方便,新建一个 Android Project,本地路径为 …/ACE_Android/ACE_Demo01;

2. 新建 Flutter Module

2.1 命令行方式

小菜首先采用如下命令行新建一个 Flutter Module,此时本地路径为 …/ACE_Android 与 ACE_Demo01 同级;

flutter create -t module my_flutter

AAffA0nNPuCLAAAAAElFTkSuQmCC

2.2 AndroidStudio 工具方式

小菜也用 AndroidStudio 尝试,同样简单便利;File -> New -> New Flutter Project -> Flutter Module;

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

3. Android Project 中添加依赖

3.1 手动引入

在 setting.gradle 中加入 Flutter 的引入;

include ':app'

//加入下面配置

setBinding(new Binding([gradle: this]))

evaluate(new File(

settingsDir.parentFile,

'my_flutter/.android/include_flutter.groovy'

))

AAffA0nNPuCLAAAAAElFTkSuQmCC

在 app/build.project 中添加 Flutter 依赖;

implementation project(':flutter')

AAffA0nNPuCLAAAAAElFTkSuQmCC

3.2 AndroidStudio 工具引入

可采用 Flie -> Sync Project with Grdle Files 时,可通过 Import Flutter Module 方式引入;此时若报 The Gradle files could not be updated automatically 则需要手动 3.1 操作;

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

4. 原生与 Flutter 交互

Android 引用 Flutter 通常是两种,一种是新建一个 View 用来展示 Flutter 页面,另一种是 Fragment;其本质还是将 Flutter View 作为 Android View 的子 View 展示;

小菜新建一个无标题栏的 FlutterActivity 和一个 FlutterFragment,在 MainActivity 添加一个按钮跳转到 FlutterActivity 展示 FlutterFragment;

public class FlutterActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_flutter);

getSupportFragmentManager().beginTransaction()

.replace(R.id.container, new FlutterFragment())

.commit();

}

}

public class FlutterFragment extends Fragment {

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,

@Nullable Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_main, container, false);

getActivity().getSupportFragmentManager()

.beginTransaction()

.add(R.id.container, Flutter.createFragment("/"))

.addToBackStack("flFlutter.createFragmentutter")

.commit();

return rootView;

}

}

通过 Flutter.createFragment("/") 设置跳转路由;

AAffA0nNPuCLAAAAAElFTkSuQmCC

5. 签名打包

小菜直接运行 debuge 模式一切正常,只是在跳转 Flutter 时不如直接跳转原生流畅,后期优化;而打包成 release 包与 Android 原生相同,无需特别处理 Flutter Module;

注意事项

1. minSdkVersion >= 16

小菜在集成过程中,使用 Flutter 时会提示 SDK 最低版本在 16 以上,需注意;

2. Flutter Module 路径

小菜在学习过程中,无论是命令行创建还是 AndroidStudio 工具创建 Flutter Module 路径并非一定要与 Android Project 同级,关键是 setting.gradle 路径配置;

new File 文件第一个参数 settingsDir.parentFile 即 Android Project 所在文件路径,第二个参数为 Flutter Module 中 .groovy 路径;我们可以使用只有一个参数的完整路径;

// 两个参数

evaluate(new File(

settingsDir.parentFile,

'my_flutter/.android/include_flutter.groovy'

))

// 一个参数

evaluate(new File(

'/Users/user/Documents/workspace/ACE_Flutter/flutter_module01/flutter_module01/.android/include_flutter.groovy'

))

3. 新的 evalute 会覆盖上一个

小菜测试是,在 setting.gradle 中引入多个 evalue,以为可以同时引入多个 Flutter Module,而实际是后面的引入会覆盖先前的引入,以最后一个 evalue module 为准;

AAffA0nNPuCLAAAAAElFTkSuQmCC

小菜对 Android 与 Flutter 交互接触较少,需进一步学习;如有错误请多多指导!

来源:阿策小和尚

欢迎闲来吐槽

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值