前言
前面的文章介紹了純Flutter項目的打包方式，但是對於很多人來說可能已經存在了一套Android框架的項目，所以如何在現有原生Android項目中添加Flutter成了大部分人的需求，下面我們就來看下如何在現有的Android項目中添加Flutter項目。
正文
1、創建Flutter項目
在集成之前，首先我們要有自己的原生Android項目，如下圖
圖中畫出了Android項目的完整路徑，下面就要劃重點了，很多人在這上面遇到了坑
我們創建Flutter項目要在上圖中的Flutter文件夾下，注意，注意，注意，一定不能在nativewithflutter文件下，這裏是深坑，千萬不要掉進去，我們cd到Flutter文件夾下執行
flutter create -t module xxxx
PS: xxxx就是你想要創建的flutter項目名稱
創建完成之後一個和我們Android原生項目平級的Flutter項目就創建完成了，如下圖
2、添加Flutter到當前Android項目
- 在Android項目根目錄下的settings.gradle文件中，添加如下代碼
setBinding(new Binding(gradle:this))
evaluate(
new File(
settingsDir.parentFile,
"native_flutter/.android/include_flutter.groovy"
)
)
如下
上面的native_flutter要改成你自己剛剛創建的flutter項目的module名稱
- 在Android項目的app目錄下，build.gradle文件中，在android{}節點下添加如下信息
android {
...
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
...
}
- 在Android 項目的app目錄下，build.gradle文件中，在dependencies下添加依賴
dependencies {
...
implementation project(':flutter')
}
添加完成之後，在原生Android項目中添加Flutter的準備工作就完成了，下面來填下在集成過程中遇到的坑
1、androidx.*的衝突
如果你的Android項目中使用的是com.android.support庫，在創建flutter moudle的時候，使用的是androidx.*庫，這個時候就要解決庫的遷移問題，我的解決方案是把新生成的androidx.*的庫，換成了com.android.support.*的庫，具體的遷移版本可以參考這篇文章
接下來，我們看下如何在項目中使用flutter項目，其實對Android來說，我們加入對Flutter的Widget其實就是一個View，所以在android中用Flutter就是用一個view去承載Flutter項目，所以我們首先要在我們的Android項目中創建一個FlutterView.
FlutterView flutterView = Flutter.createView(this,getLifecycle(),"flutter_view");//這個initialRoute是傳入到Flutter項目中的，用來區分標識不同的界面
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView,layoutParams);
完整的代碼如下
在Flutter項目中添加
void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String route){
switch (route) {
case "flutter_view":
return NativeFlutter();//自己定義的展示的界面
break;
default:
return MyApp();
}
}
window.defaultRouteName 會接受到主項目中傳入的路由路徑，然後返回對應的Widget，之後這個view就完全可以做一套整個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項目中的視圖",
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.black
),
),
);
}
}
下面看下運行效果
結尾
截止到現在，在原生項目中添加Flutter項目就介紹完了
以下是我的Flutter系列的鏈接，後續會持續更新，歡迎大家指正。
Flutter 系列文章
- Flutter 學習 - 開篇
- Flutter 學習 - 基礎框架
- Flutter 學習 - 網絡請求和數據解析
- Flutter 學習 - Widget 之 Text
- Flutter 學習 - Widget 之 RichText
- Flutter 學習 - Widget 之 Image和Icon
- Flutter 學習 - Widget 之 TextField
- Flutter 學習 - Widget 之 菜單按鈕
- Flutter 學習 - Widget 之 佈局 Widget
- Flutter 學習 - 容器類Widget
- Flutter 學習 - 可滾動的 Widget
- Flutter 學習 - 功能類Widget
- Flutter 學習之打包 - 純Flutter項目生成Android包
更多關於技術相關的內容請關注博主公衆號–迷途程序猿
