最近因公司需引入flutter到项目，进入大前端开发，本人就慢慢开始学习flutter混合开发，在项目中慢慢嵌入flutter，我原先是Android开发，所以先从Android端入手。
image.png
下面一步步讲解在原有的Android项目中嵌入flutter：
-
第一步：Android Studio 中新建flutter module （File -> New -> New Module -> Flutter Module -> Next -> Next -> Finish）
image.png
image.png 第二步：flutter module的pubspec.yaml文件中添加第三方都依赖，如下方我的代码演示：
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
#https://pub.flutter-io.cn/packages/webview_flutter
webview_flutter: ^2.0.10
#https://github.com/Sky24n/fluintl
fluintl: ^2.0.0
#https://github.com/Sky24n/flustars
flustars: ^2.0.1
# https://github.com/flutter/plugins/tree/master/packages/url_launcher
url_launcher: ^6.0.9
# flutter_boost暂未兼容空安全，暂不引入
# https://github.com/alibaba/flutter_boost
# flutter_boost:
# git:
# url: 'https://github.com/alibaba/flutter_boost.git'
# ref: 'v3.0-preview.9'
- 第三步：修改main.dart，添加路由进入不同页面：
void main(){
runApp(MyApp(window.defaultRouteName));
}
class MyApp extends StatelessWidget {
//获取方法通道
static const platform = MethodChannel('com.mjb.kefang/navigation');
late String mRouteName;
MyApp(this.mRouteName);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: _MainEntrance(mRouteName),
);
}
Widget _MainEntrance(String defaultRouteName) {
print(defaultRouteName);
String route,paramsJson;
int index = defaultRouteName.indexOf('?');
if(index == -1){
route = defaultRouteName;
paramsJson = '{}';
}else{
route = defaultRouteName.substring(0,index);
paramsJson = defaultRouteName.substring(index + 1);
}
Map<String, dynamic> params = json.decode(paramsJson);
switch (route){
case 'flutter_web':
//进入自定义的webview页面
return WebScaffold(
title: params['title'],
titleId: params['titleId'],
url: params['url'],
);
case 'flutter_main':
default:
return MyHomePage(title: 'Flutter Demo Home Page');
}
}
}
- 第四步：在原Android项目中新建FlutterUIActivity 继承FlutterActivity(写完Activity记得在清单文件注册) ：
public class FlutterUIActivity extends FlutterActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
FlutterView flutterView = new FlutterView(this);
//FlutterActivity 中能获取FlutterEngine
FlutterEngine flutterEngine = getFlutterEngine();
//进入百度的网址
//flutterEngine.getNavigationChannel().setInitialRoute("flutter_web?{'title':'百度一下'，'url':'https://www.baidu.com'}");
//进入flutter主页
flutterEngine.getNavigationChannel().setInitialRoute("flutter_main");
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
// 关键代码，将Flutter页面显示到FlutterView中
flutterView.attachToFlutterEngine(flutterEngine);
//用FlutterView替代Activity的ContentView
setContentView(flutterView);
}
- 第五步：在Android主项目的setting.gradle文件中添加如下的代码,这一步是引用flutter工程（flutter_module是你的flutter模块名）：
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'flutter_module/.android/include_flutter.groovy'
))
include ':flutter_module'
project(':flutter_module').projectDir = new File('../flutter_module')
- 第六步： 在app的build.gradle下添加如下代码：
debugImplementation project(':flutter')
profileImplementation project(':flutter')
releaseImplementation project(':flutter')
或者：
implementation project(':flutter')
然后就可以开始编译项目了，如果遇到flutter编译不过的问题，可以重启Android studio试试
IOS将后续完善
image.png
