前言
前面的文章介紹了純Flutter項(xiàng)目的打包方式筒扒，但是對于很多人來說可能已經(jīng)存在了一套Android框架的項(xiàng)目，所以如何在現(xiàn)有原生Android項(xiàng)目中添加Flutter成了大部分人的需求绊寻，下面我們就來看下如何在現(xiàn)有的Android項(xiàng)目中添加Flutter項(xiàng)目花墩。
正文
1悬秉、創(chuàng)建Flutter項(xiàng)目
在集成之前，首先我們要有自己的原生Android項(xiàng)目冰蘑，如下圖
圖中畫出了Android項(xiàng)目的完整路徑和泌，下面就要?jiǎng)澲攸c(diǎn)了，很多人在這上面遇到了坑
我們創(chuàng)建Flutter項(xiàng)目要在上圖中的Flutter文件夾下祠肥，注意武氓，注意，注意仇箱，一定不能在nativewithflutter文件下县恕，這里是深坑，千萬不要掉進(jìn)去剂桥，我們cd到Flutter文件夾下執(zhí)行
flutter create -t module xxxx
PS: xxxx就是你想要?jiǎng)?chuàng)建的flutter項(xiàng)目名稱
創(chuàng)建完成之后一個(gè)和我們Android原生項(xiàng)目平級(jí)的Flutter項(xiàng)目就創(chuàng)建完成了忠烛，如下圖
2、添加Flutter到當(dāng)前Android項(xiàng)目
- 在Android項(xiàng)目根目錄下的settings.gradle文件中权逗，添加如下代碼
setBinding(new Binding(gradle:this))
evaluate(
new File(
settingsDir.parentFile,
"native_flutter/.android/include_flutter.groovy"
)
)
如下
上面的native_flutter要改成你自己剛剛創(chuàng)建的flutter項(xiàng)目的module名稱
- 在Android項(xiàng)目的app目錄下美尸，build.gradle文件中，在android{}節(jié)點(diǎn)下添加如下信息
android {
...
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
...
}
- 在Android 項(xiàng)目的app目錄下斟薇，build.gradle文件中师坎，在dependencies下添加依賴
dependencies {
...
implementation project(':flutter')
}
添加完成之后，在原生Android項(xiàng)目中添加Flutter的準(zhǔn)備工作就完成了堪滨，下面來填下在集成過程中遇到的坑
1屹耐、androidx.的沖突
如果你的Android項(xiàng)目中使用的是com.android.support庫，在創(chuàng)建flutter moudle的時(shí)候椿猎，使用的是androidx.庫惶岭，這個(gè)時(shí)候就要解決庫的遷移問題，我的解決方案是把新生成的androidx.的庫犯眠，換成了com.android.support.的庫按灶，具體的遷移版本可以參考這篇文章
接下來，我們看下如何在項(xiàng)目中使用flutter項(xiàng)目筐咧，其實(shí)對Android來說鸯旁，我們加入對Flutter的Widget其實(shí)就是一個(gè)View，所以在android中用Flutter就是用一個(gè)view去承載Flutter項(xiàng)目量蕊，所以我們首先要在我們的Android項(xiàng)目中創(chuàng)建一個(gè)FlutterView.
FlutterView flutterView = Flutter.createView(this,getLifecycle(),"flutter_view");//這個(gè)initialRoute是傳入到Flutter項(xiàng)目中的铺罢，用來區(qū)分標(biāo)識(shí)不同的界面
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView,layoutParams);
完整的代碼如下
在Flutter項(xiàng)目中添加
void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String route){
switch (route) {
case "flutter_view":
return NativeFlutter();//自己定義的展示的界面
break;
default:
return MyApp();
}
}
window.defaultRouteName 會(huì)接受到主項(xiàng)目中傳入的路由路徑，然后返回對應(yīng)的Widget残炮，之后這個(gè)view就完全可以做一套整個(gè)Flutter app去處理了
完整的NativeFlutter Widget是這樣的
import 'package:flutter/material.dart';
class NativeFlutter extends StatefulWidget {
NativeFlutter();
@override
_NativeFlutterState createState() => _NativeFlutterState();
}
class _NativeFlutterState extends State<NativeFlutter> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Text(
"這是Flutter項(xiàng)目中的視圖",
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.black
),
),
);
}
}
下面看下運(yùn)行效果
結(jié)尾
截止到現(xiàn)在韭赘，在原生項(xiàng)目中添加Flutter項(xiàng)目就介紹完了
以下是我的Flutter系列的鏈接，后續(xù)會(huì)持續(xù)更新势就，歡迎大家指正泉瞻。
Flutter 系列文章
- Flutter 學(xué)習(xí) - 開篇
- Flutter 學(xué)習(xí) - 基礎(chǔ)框架
- Flutter 學(xué)習(xí) - 網(wǎng)絡(luò)請求和數(shù)據(jù)解析
- Flutter 學(xué)習(xí) - Widget 之 Text
- Flutter 學(xué)習(xí) - Widget 之 RichText
- Flutter 學(xué)習(xí) - Widget 之 Image和Icon
- Flutter 學(xué)習(xí) - Widget 之 TextField
- Flutter 學(xué)習(xí) - Widget 之 菜單按鈕
- Flutter 學(xué)習(xí) - Widget 之 布局 Widget
- Flutter 學(xué)習(xí) - 容器類Widget
- Flutter 學(xué)習(xí) - 可滾動(dòng)的 Widget
- Flutter 學(xué)習(xí) - 功能類Widget
- Flutter 學(xué)習(xí)之打包 - 純Flutter項(xiàng)目生成Android包
