android flutter 混合开发,Flutter 开发-Flutter与Android混合开发

之前项目混合开发使用了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模块，如下图。

image.png

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: {

"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();

}

}