首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >【Flutter 专题】48 图解 Android 原生集成 Flutter Module

【Flutter 专题】48 图解 Android 原生集成 Flutter Module

作者头像
阿策小和尚
发布2019-08-12 16:33:35
发布2019-08-12 16:33:35
1.1K0
举报
文章被收录于专栏:阿策小和尚阿策小和尚

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

集成方式

1. 新建 Android Project

和尚为了测试方便,新建一个 Android Project,本地路径为 ../ACE_Android/ACE_Demo01

2. 新建 Flutter Module
2.1 命令行方式

和尚首先采用如下命令行新建一个 Flutter Module,此时本地路径为 ../ACE_AndroidACE_Demo01 同级;

代码语言:javascript
复制
flutter create -t module my_flutter
2.2 AndroidStudio 工具方式

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

3. Android Project 中添加依赖
3.1 手动引入
  1. setting.gradle 中加入 Flutter 的引入;
代码语言:javascript
复制
include ':app'
//加入下面配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'my_flutter/.android/include_flutter.groovy'
))
  1. app/build.project 中添加 Flutter 依赖;
代码语言:javascript
复制
implementation project(':flutter')
3.2 AndroidStudio 工具引入

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

4. 原生与 Flutter 交互

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

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

代码语言:javascript
复制
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("/") 设置跳转路由;

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.parentFileAndroid Project 所在文件路径,第二个参数为 Flutter Module.groovy 路径;我们可以使用只有一个参数的完整路径;

代码语言:javascript
复制
// 两个参数
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 为准;


和尚对 AndroidFlutter 交互接触较少,需进一步学习;如有错误请多多指导!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 阿策小和尚 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 集成方式
    • 1. 新建 Android Project
    • 2. 新建 Flutter Module
      • 2.1 命令行方式
      • 2.2 AndroidStudio 工具方式
    • 3. Android Project 中添加依赖
      • 3.1 手动引入
      • 3.2 AndroidStudio 工具引入
    • 4. 原生与 Flutter 交互
    • 5. 签名打包
  • 注意事项
    • 1. minSdkVersion >= 16
    • 2. Flutter Module 路径
    • 3. 新的 evalute 会覆盖上一个
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档