操作步骤
- 在Android项目的同级目录执行命令创建flutter module
flutter create -t module <module_name>
- 接着到flutter module的.android目录下，执行gradle命令(用来生成aar文件)，如果隐藏文件无法显示的话使用下面的命令。
defaults write com.apple.finder AppleShowAllFiles -bool true
cd <module_name/.android>
./gradlew assembleDebug
- 在已存在的android项目的settings.gradle文件中添加下面的代码。
setBinding(new Binding([gradle:this]))
evaluate(new File(
settingsDir.parentFile,
"<module_name>/.android/include_flutter.groovy"
))
在这步操作完之后sync项目之后会看到项目中多了一个flutter的module。
image.png
- 在已存在的android项目中的app/build.gradle文件中的dependencies部分添加下面这行代码
implementation project(':flutter')
image.png
- 在已存在项目中的Activity中添加FlutterView
//route1是在flutter代码中定义，用来确定显示哪个flutter view
var flutterView = Flutter.createView(this, lifecycle, "route1")
var frameLayout = FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
addContentView(flutterView, frameLayout)
addContentView(flutterView, frameLayout)
- 接着，在Android Studio中打开最开始创建的Flutter Module，然后在lib/main.dart项目中编写如下代码：
import 'package:flutter/material.dart';
import 'dart:ui';
import 'widget/study_feed_back.dart';
void main() => runApp(chooseWidget(window.defaultRouteName));
Widget chooseWidget(String routeName) {
switch (routeName) {
case "route1":
return StudyFeedbackView();
default:
return Center(
child: Text("Unknown Route"),
);
}
}
class StudyFeedbackView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Card(
color: Colors.white,
shape: RoundedRectangleBorder(),
child: Center(
child: Text("My Flutter View"),
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
print("哈哈");
},
child: Icon(Icons.add),
),
);
}
}
- 最后运行最初的Android项目就能看到FlutterView已经被添加到了Android项目中。
补充
- 如果要在使用Flutter热更新，直接在flutter module项目的目录下执行命令flutter attach，然后再更新flutter代码时，只有在命令行输入R，就可以实现热更新了，而不用重新运行项目
