之前项目混合开发使用了cordova,但是native+flutter的混合开发方案更加受到青睐，所以也学习一波。
flutter模块的导入
1.创建 flutter_module
首先在进入Android项目得根目录得上一级目录 如我得Android项目是 D:\android_workplace\TestDemo 上一级目录就是 D:\android_workplace执行：
flutter create -t module flutter_module
上面的flutter_module就是我们创建的flutter模块名称。
2.在settings.gradle文件中添加如下代码。
setBinding(new Binding([gradle:this]))
evaluate(new File(
settingsDir.parentFile,'flutter_module/.android/include_flutter.groovy'
))
添加完后就能够在Android Studio中看到flutter模块，如下图。
3.在app build.gradle中 引入flutter implementation project(':flutter')
这样就完成了集成。
加载flutter页面
经过前面的一些操作，我们就在Native项目中成功依赖了flutter模块，那么下面学习如何在Native项目中加载flutter页面。通过查看flutter模块代码可以发现，该模块提供了以下两种方式来加载flutter页面:
1.将flutter页面构建成View，通过addView来显示flutter页面
2.将flutter页面构建成Fragment，通过对fragment的操作来显示flutter页面
1.将flutter页面构建成View，通过addView来显示flutter页面
1.创建一个FlutterActivity继承FlutterFragmentActivity
public class FlutterActivity extends FlutterFragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_flutter);
View flutterView = Flutter.createView(this, getLifecycle(), "flutter_test");
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.MATCH_PARENT);
addContentView(flutterView, layoutParams);
}
}
2 .在appliction 中添加 FlutterMain.startInitialization(this);
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
FlutterMain.startInitialization(this);
}
}
3.在mainActivity启动
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.jump).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent=new Intent(MainActivity.this,FlutterActivity.class);
startActivity(intent);
}
});
运行时可能会报错
Invoke-customs are only supported starting with Android O (--min-api 26)
Message{kind=ERROR, text=Invoke-customs are only supported starting with Android O (--min-api 26), sources=[Unknown source file], tool name=Optional.of(D8)}
直接把 Android 项目得minSdkVersion 改成 26
运行再来点击（debug模式跳转到flutter界面会有一个黑屏的过程（看到的白屏是本身R.layout.activity_main_flutter这个布局的效果)）
4.到flutter module中的main.dart中配置路由设置 View flutterView = Flutter.createView(this, getLifecycle(), "flutter_test"); flutter_test对应flutter哪个页面
import 'package:flutter/material.dart';
import 'package:flutter_module/pages/MainPage.dart';
import 'package:flutter_module/pages/MinePage.dart';
//程序入口
void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
//相当于主页面
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
// Material 是UI呈现的“一张纸”
return MaterialApp(
title:" Flutter Demo",
theme: ThemeData.light(),
home:MyPage(),
routes: <String, WidgetBuilder>{
"flutter_test": (context) => MyPage(),
}
);
}
}
class MyPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: Center(
child: Text("Flutter页面"),
),
);
}
}
2.将flutter页面构建成Fragment，通过对fragment的操作来显示flutter页面
- 先创建一个MyFlutterFragment
public class FlutterFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return Flutter.createView(getActivity(),getLifecycle(),"fragment_flutter");
}
}
- 然后创建一个FlutterFragmentActivity 显示出来
public class FlutterFragmentActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flutter_fragment);
FragmentTransaction transaction= getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.fl_container, Flutter.createFragment("这里是flutter页面"));
transaction.commit();
}
}
