// 引入flutter module

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

evaluate(new File( // new

settingsDir.parentFile, // new

‘edu_flutter_module/.android/include_flutter.groovy’ // new

))

include ‘:edu_flutter_module’

project(‘:edu_flutter_module’).projectDir = new File(‘…/edu_flutter_module’)

可以看到目前我们依赖的flutter module，是在原生工程目录同级的。

  1. 打开主工程的build.gradle文件，在dependencies下加入以下配置：

implementation project(“:flutter”)

ok，这两步是官方的指引，配置完之后就完事了？ 太天真了，还需要有一些额外的调整。构建一下就知道了：

异常1：Gradle DSL method not found: ‘google()’

在这里插入图片描述

项目中用的gradle版本还是比较旧的，需要升级一下：

在这里插入图片描述

异常2：AAPT error：resource android:attr/fontVariationSettings not found

在这里插入图片描述

这个异常需要将compileSdkVersion升级到28，之前是26。

异常3：assert appProject !=null

在这里插入图片描述

这个问题巨坑，我们的主工程名是course，但flutter的构建脚本是硬编码为app，有两种解决办法：

  1. 重命名module名字，命名为app

  2. 修改flutter脚本（我选的是这种）

在这里插入图片描述

这样，flutter脚本就能找到我们的工程，编译也ok了。

但其实还有问题，因为目前我们还未升级support包到AndroidX版本，而创建出来的module工程默认是支持AndroidX的，所以我们需要进行降级，等后续升级工程之后再处理。

修改edu_flutter_module/pubspec.yaml，将androidX改为false：

module:

androidX: false

androidPackage: com.tencent.edu

iosBundleIdentifier: com.tencent.edu

改完这个之后，终于工程编译通过了，但这就结束了吗，还有坑等着你呢。

原生页面引入Flutter页面

上一个主题我们解决掉一些坑之后终于把flutter作为一个module集成到我们的工程中，接下来我们尝试写个页面嵌入到我们页面。

目前课堂用的flutter版本是：v1.12.13+hotfix.5，这个版本的使用跟之前的版本会有些差异，可以参考官方的wiki：

https://github.com/flutter/flutter/wiki/Upgrading-pre-1.12-Android-projects

这里我尝试把课堂的首页替换成Flutter页面，做了以下调整：

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

// TODO: 2020-04-01 增加flutter视图

View view = inflater.inflate(R.layout.fragment_index, container, false);

FlutterEngine flutterEngine = new FlutterEngine(getActivity());

flutterEngine.getDartExecutor().executeDartEntrypoint(

DartExecutor.DartEntrypoint.createDefault()

);

flutterEngine.getNavigationChannel().setInitialRoute(“route1”);

FlutterView flutterView = new FlutterView(getActivity());

FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

FrameLayout flContainer = view.findViewById(R.id.fl_content);

// 关键代码，将Flutter页面显示到FlutterView

flutterView.attachToFlutterEngine(flutterEngine);

flContainer.addView(flutterView, lp);

return view;

}

fragment_index.xml

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical” android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<FrameLayout

android:id=“@+id/fl_content”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

/>

dart代码实现：

main.dart

import ‘package:edu/home_page.dart’;

import ‘package:flutter/material.dart’;

import ‘dart:ui’;

import ‘dart:convert’;

void main() {

runApp(_widgetForRoute(window.defaultRouteName));

}

// 获取路由名称

String _getRouteName(String s) {

if (s.indexOf(‘?’) == -1) {

return s;

} else {

return s.substring(0, s.indexOf(‘?’));

}

}

// 获取参数

Map<String, dynamic> _getParamsStr(String s) {

if (s.indexOf(‘?’) == -1) {

return Map();

} else {

return json.decode(s.substring(s.indexOf(‘?’) + 1));

}

}

Widget _widgetForRoute(String url) {

String route = _getRouteName(url);

Map<String, dynamic> params = _getParamsStr(url);

switch (route) {

default:

return MaterialApp(

theme: ThemeData(

primaryColor: Color(0xFF008577),

primaryColorDark: Color(0xFF00574B),

),

home: HomePage(route, params),

);

}

}

home_page.dart

import ‘package:flutter/material.dart’;

class HomePage extends StatefulWidget {

String route;

Map<String, dynamic> params;

HomePage(this.route, this.params);

@override

State createState() {

return _HomePageState();

}

}

class _HomePageState extends State {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(‘Flutter页面’),

automaticallyImplyLeading: false,

),

body: Center(

child: Text(‘首页’),

),

);

}

}

ok，Demo代码到这里就写完了，然后信心满满的run起来，发现直接崩了。这就是我要跟你说的其中一个坑，so架构的问题：

在这里插入图片描述

大部分老项目工程中用到的是armeabi架构，但flutter最低支持到armeabi-v7a，如果不做特殊处理，就会出现上面的Crash。怎么办？解决办法自然有，就是找到flutter module工程的构建物，把armeabi-v7a下的libFlutter.so拿出来，放到原生工程的armeabi下，我写了个shell脚本，然后通过Hook Gradle Task的方式插入到编译流程中去。

copyFlutterSo.sh

#!/bin/bash

当前目录

CURRENT_DIR=“pwd”

当前build目录，具体以工程为准

BUILD_DIR=“pwd/build”

gradle 5.6.2 armeabi so路径

#ARMEABI_DIR=“$BUILD_DIR/intermediates/merged_native_libs/debug/out/lib/armeabi”

gradle 4.10.1 armeabi so路径

ARMEABI_DIR=“$BUILD_DIR/intermediates/transforms/mergeJniLibs/$1/0/lib/armeabi”

armeabi-v7a so存放路径

ARMEABI_V7A_DIR=“$BUILD_DIR/intermediates/transforms/mergeJniLibs/$1/0/lib/armeabi-v7a”

echo -e “\033[47;30m ========== copy $1 libflutter.so ========== \033[0m”

if [[ “$1” == “debug” ]]; then

将libflutter.so copy到armeabi架构中去

cp -rf ${ARMEABI_V7A_DIR}/libflutter.so ${ARMEABI_DIR}

echo “copy ${ARMEABI_V7A_DIR}/libflutter.so to ${ARMEABI_DIR}”

elif [[ “$1” == “profile” ]]; then

将libflutter.so copy到armeabi架构中去

cp -rf ${ARMEABI_V7A_DIR}/libflutter.so ${ARMEABI_DIR}

将libapp.so也copy到armeabi架构中去

cp -rf ${ARMEABI_V7A_DIR}/libapp.so ${ARMEABI_DIR}

echo “copy ${ARMEABI_V7A_DIR}/libflutter.so to ${ARMEABI_DIR}”

echo “copy ${ARMEABI_V7A_DIR}/libapp.so to ${ARMEABI_DIR}”

elif [[ “$1” == “release” ]]; then

将libflutter.so copy到armeabi架构中去

cp -rf ${ARMEABI_V7A_DIR}/libflutter.so ${ARMEABI_DIR}

将libapp.so也copy到armeabi架构中去

cp -rf ${ARMEABI_V7A_DIR}/libapp.so ${ARMEABI_DIR}

echo “copy ${ARMEABI_V7A_DIR}/libflutter.so to ${ARMEABI_DIR}”

echo “copy ${ARMEABI_V7A_DIR}/libapp.so to ${ARMEABI_DIR}”

fi

Hook Gradle Task

afterEvaluate { project ->

android.applicationVariants.each { variant ->

/**

  • 由于flutter不支持armeabi，此处在merge(Debug|Profile|Release)NativeLibs与strip(Debug|Profile|Release)DebugSymbols之间插入一个任务，

  • 将libflutter.so和libapp.so拷贝到merged_native_libs/(debug|profile/release)/out/lib/armeabi目录下，使它们能打到最终的apk里。

  • 详情见copyFlutterSo.sh

*/

def taskPostfix = variant.name.substring(0, 1).toUpperCase() +

variant.name.substring(1)

project.task(“copyFlutterSo$taskPostfix”) {

doLast {

exec {

// 执行shell脚本

commandLine “sh”, “./copyFlutterSo.sh”, variant.name

}

}

}

// 注意这个是在gradle 5.6.2版本的task

小结

有了这么多优秀的开发工具，可以做出更高质量的Android应用。

当然了，“打铁还需自身硬”，想要写出优秀的代码，最重要的一点还是自身的技术水平，不然用再好的工具也不能发挥出它的全部实力。

在这里我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅的精品资料。在脑图中，每个知识点专题都配有相对应的实战项目，可以有效的帮助大家掌握知识点。

总之也是在这里帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

# flutter
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony 商城App实战 - 商品详情实现

avatar 开源鸿蒙跨平台开发者社区

cix p1 OpenHarmony 6.0r 上使用mali g720调用vulkan进行端侧推理

笔者之前发布过此芯p1开发板使用OpenHarmony时llama.cpp不同优化速度对比(GPU vs CPU)的文章，使用的是一张amd的rx580显卡。理论上支持vulkan的GPU都可以使用vulkan后端的llama.cpp （GPU）进行端侧推理。

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony移动数据使用监管助手App实战 - WiFi详情实现

avatar 开源鸿蒙跨平台开发者社区