flutter进阶(1)混合开发-集成与调试_U雅的小闹钟

http://blog.sina.com.cn/u/2792234054

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

flutter进阶(1)混合开发-集成与调试

(2019-11-21 10:02:29)

标签：

it

分类： flutter

一 Fullter 混合开发流程与创建Fultter module

1. Flutter 集成步骤

(1) 创建Flutter module

在做混合开发之前，首先需要创建一个Flutter module。

假如你的Native 项目是这样的：.xxx/flutter_hybird/native项目（即flutter项目）

$ cd xxx/flutter_hybird/ ====>切换到flutter项目的上一级目录

$ flutter create -t module flutter_module

① 上面代码会切换到你的Android/ios项目的上一级目录，并创建一个flutter模块

在你Flutter项目中切换到上一级目录 cd ../

②创建好后　打开目录下的程序＝＝＝＝＝＝＝＝＝＝＝＝

上面是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插件的Androidstudio 打开这个flutter_module 项目，并且是可以运行的。

③在flutter_module 同一目录下创建Android项目

#在setting.gradle中添家配置信息，让Flutter作为单独的模块加载进来

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


        evaluate(new File(settingsDir.parentFile,

                            'flutter_module/.android/include_flutter.groovy'))

(2) 添加Flutter module依赖

#在build.gradle中添加Flutter库的依赖

#在build.gradle中需要的配置

(3) 在java中调用Flutter module

在java中调用Flutter模块有两种方式

. 使用Flutter.createView API的方式

. 使用FlutterFragment的方式

① 使用

1，在Android项目中调用以下代码：

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();


           transaction.replace(R.id.framelayout, Flutter.createFragment("                                                                                      {name:'jake',dataList:'['aa','bb']'}"));

           transaction.commit();

2， flutter_module中通过如下获取，需要导入dart:ui的包：

(4)调试 --热重启/重新加载

混合开发中的热重启/重新加载需要做到：

① 打开一个模拟器，或链接一个设备到电脑上；

② 关闭我们的app,然后运行flutter attach （在flutter_module项目中）

接下来运行Android部分代码会出现：

注：

# r: 热加载

# R：热重启

# h ：获取帮助

# d ：断开连接

注意如果你同事多个模拟器或者连接多个设备，运行Flutter attach 会提示你选择一个设备：

接下来我们需要flutter attach -d 来选择一个设备

例如：

flutter attach -d ‘emulator-5554’

注意-d 后面跟的是设备ID

(7) 调试Dart代码 (debug 调试)

混合开发模式下，如何更好更高效的调试我们的代码的方式：

① 关闭APP（这一步很关键）

② 点击AndroidStudio 的Flutter Attach 按钮（需要首先安装Flutter 与Dart插件,flutter_module项目中的按键）

③ 启动app

注意：

在运行Android工程时一定要在Android模式下的AndroidStudio中运行，因为Flutter模式下的Android Studio 运行的是Flutter_module下的.android中的Android 工程

(8) 发布应用

Android项目下：

# 打包

#第一步：生成Android签名证书

# 第二步 :设置 gradle 变量

1.将你的签名证书copy到你的android/app目录下

2. 编辑~/.gradle/gradle.properties 或 ../android/gradle.properties(一个是全局gradle.properties,一个是项目中的gradle.properties)

     MYAPP_RELEASE_KEY_ALIAS= your keystore alias

     MYAPP_RELEASE_STORE_FILE=your keystore filename

   MYAPP_RELEASE_KEY_PASSWORD= 密码

   MYAPP_RELEASE_STORE_PASSWORD= 密码

   3.第三步：在gradle配置文件中添加签名配置

      编辑 android/app/build.gradle文件添加代码如下

3.第四步：签名打包apk

(5) 运行项目

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：flutter开发实践（10）Gridview实现网格布局

后一篇：flutter进阶(2)flutter通信机制

新浪BLOG意见反馈留言板　欢迎批评指正