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

    }
}