Flutter学习教程2--原生android项目集成flutter

一、新建Android项目

        正常新建一个android项目。

二、新建Flutter Module

 

方式1:通过命令行来创建，首先切换到Android项目的同级目录下，执行以下命令：

flutter create -t module my_flutter

其中my_flutter为module的名字。

方式2:直接使用Android Studio来创建，依次点击左上角的File --> New --> New Flutter Project，然后选择Flutter Module。这个过程根据AS版本差异会有细微差别。

新建Flutter Module.png

然后填写module的名称、路径。

最后填写module的包名，点击Finish就创建好了一个Flutter Module。

三、在Android项目中引入Flutter Module

1、在app下的build.gradle文件中添加以下配置：

compileOptions {
  sourceCompatibility 1.8
  targetCompatibility 1.8
}

这是使用Java 8所需要的配置，在这里的作用是为了解决版本兼容问题，如果不配置的话运行项目可能会报错：Invoke-customs are only supported starting with Android O (--min-api 26)。
2、在项目根目录下的setting.gradle文件中配置：

include ':app'
include ':my_flutter'
setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                      
        settingsDir.parentFile,                                               
        'flutterdemo0609/my_flutter/.android/include_flutter.groovy'                          // new
))

3、在app下的build.gradle文件中引入flutter

implementation project(':flutter')

这样就成功地将Flutter引入到了Android原生项目中。

四、demo

由于Flutter版本的更新，一些API在高版本的flutterSDK中已经被废弃了。使用时如果发现flutter中的一些方法找不到，多半是flutter版本的原因。

  1.使用FlutterView
  在你的Activity的onCreate()方法中添加以下代码：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              /*  Snackbar.make(view, "进入flutter页面", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
                Intent i = new Intent(MainActivity.this , myFlutterActivity.class);
                //启动
                startActivity(i);*/
                FlutterEngine flutterEngine = new FlutterEngine(MainActivity.this);
                flutterEngine.getDartExecutor().executeDartEntrypoint(
                        DartExecutor.DartEntrypoint.createDefault()
                );
                flutterEngine.getNavigationChannel().setInitialRoute("route1");
                
                // 通过FlutterView引入Flutter编写的页面
                FlutterView flutterView = new FlutterView(MainActivity.this);
                FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
                        800,
                        600);
                flutterView.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));

                addContentView(flutterView, lp);
                // 关键代码，将Flutter页面显示到FlutterView中
                flutterView.attachToFlutterEngine(flutterEngine);

            }

    });
}

2、运行项目，如果报Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from..

之类的错，是Androidx和Android support库不能共存导致的，可能是flutter版本里引用了Androidx，而原生android项目引用了support库导致的。解决办法是使flutter版本和android原生项目引用的库统一起来，要么都是androidx，要么都是support库，具体解决方法参考这个网址https://www.jianshu.com/p/f7a7a8765294?tdsourcetag=s_pctim_aiomsg

3、运行结果

白色的是原生android项目页面，绿色的就是flutter的页面。