Flutter 使用AndroidStudio并集成Flutter界面

AndroidStudio项目中集成Flutter

需先到项目工程中集成flutter module。然后，通过原生Android的Activity跳转或addView()方式打开flutter页面。

---

AS创建module

菜单选项  →  File -> New -> New Flutter Project -> Flutter Module； 

---

Android Project 中添加依赖

如果第1步比较顺利，默认工程会自动配置依赖。

如果没有默认配置，那需要手动配置一下，参考如下。

（1）在 setting.gradle 中加入 Flutter 的引入；

include ':app'

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir,
  'flutter_view/.android/include_flutter.groovy'
))

include ':flutter_view'

（2）在app/build.project 中添加 Flutter 依赖；

dependencies{
    implementation project(path: ':flutter')
}

（3）在app/build.project 中指定JDK1.8，且最低版本在 16 以上；

android {
  defaultConfig {//版本号...minSdkVersion >= 16}

  compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
  }
}

---

Flutter两种方式打开

一种是在原生里页面内添加View页面（FlutterView和FlutterFragment），另外一种是在原生页面跳转打开FlutterActivity。

FlutterEngine引擎 ：它负责执行Dart代码，将Flutter编写的UI显示到FlutterView或FlutterActivity或FlutterFragment中。创建好了一个FlutterEngine对象，我们可以通过代码指定初始路由名称。另外，每个FlutterEngine对象在显示出Flutter UI之前是需要一个warm-up准备期的，导致屏幕呈现短暂的空白。解决方式就是预先创建并启动FlutterEngine，完成warm-up过程，然后将这个FlutterEngine缓存起来，之后使用这个FlutterEngine来显示出Flutter UI。 

FlutterView

public class MyActivity extends AppCompatActivity {
    FlutterEngine flutterEngine;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mylayout);
        createEngine();
        openFlutterView();
    }
    private void createEngine(){
        flutterEngine = new FlutterEngine(this);
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        flutterEngine.getNavigationChannel().setInitialRoute("route1");//指定路由
    }
    private void openFlutterView(){
        FlutterView flutterView = new FlutterView(this);
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        FrameLayout flContainer = findViewById(R.id.flutter_view);
        flContainer.addView(flutterView, lp);

        flutterView.attachToFlutterEngine(flutterEngine);
    }
    @Override
    protected void onResume() {
        super.onResume();
        flutterEngine.getLifecycleChannel().appIsResumed();
    }
    @Override
    protected void onPause() {
        super.onPause();
        flutterEngine.getLifecycleChannel().appIsInactive();
    }
    @Override
    protected void onStop() {
        super.onStop();
        flutterEngine.getLifecycleChannel().appIsPaused();
    }

FlutterFragment

官方提供了三种创建FlutterFragment的方式：

private void  openFlutterFragment() {
    FlutterFragment flutterFragment = FlutterFragment.createDefault();
    getSupportFragmentManager()
        .beginTransaction()
        .add(R.id.fl_container, flutterFragment)
        .commit();
//或者
    FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
    FlutterFragment fragment = FlutterFragment.withNewEngine().initialRoute("route1").build();
        tx.replace(R.id.flutter_view, fragment);
        tx.commit();
}

 // 创建可缓存的FlutterEngine对象
        FlutterEngine flutterEngine = new FlutterEngine(this);
        flutterEngine.getNavigationChannel().setInitialRoute("route1");
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine);
// 通过FlutterFragment引入Flutter编写的页面
        FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id").build();

---

原生Activity跳转Flutter界面

首先，需要在工程下的AndroidManifest.xml文件中注册FlutterActivity，代码如下：

<activity
    android:name="io.flutter.embedding.android.FlutterActivity"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:theme="@style/AppTheme"
    android:windowSoftInputMode="adjustResize" />

三种启动方式：

1 、FutterActivity默认路由名称为"/"，默认打开main.dart的main方法。

startActivity(
        FlutterActivity.createDefaultIntent(this)
);

2、FutterActivity路由名称为“route1”，创建一个新的FlutterEngine对象

startActivity(
        FlutterActivity
                .withNewEngine()
                .initialRoute("route1")
                .build(this)
);

3、FutterActivity 使用缓存的引擎对象（主流推荐）

startActivity(
        // 创建可缓存的FlutterEngine对象
    FlutterEngine flutterEngine = new FlutterEngine(this);
    flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
    flutterEngine.getNavigationChannel().setInitialRoute("route1");
        
    FlutterEngineCache.getInstance().put("engine_id", flutterEngine);
    FlutterActivity
        .withCachedEngine("engine_id")
        .build(this)
);

跳转Flutter带参数

通常情况下，我们需要在页面跳转时传递参数完成一些业务功能。那么，如何在Flutter代码中获取到原生代码中的参数呢？

只需要在route地址后缀拼接参数就可以了。代码示例如下：

  private void createEngine(){
        flutterEngine = new FlutterEngine(this);
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        flutterEngine.getNavigationChannel().
            setInitialRoute("route1?{\"id\":123456}");//指定路由
    }

在flutter页面代码：

String url = window.defaultRouteName;
// route名称
String route =
    url.indexOf('?') == -1 ? url : url.substring(0, url.indexOf('?'));
// 参数Json字符串
String paramsJson =
    url.indexOf('?') == -1 ? '{}' : url.substring(url.indexOf('?') + 1);
// 解析参数
Map<String, dynamic> params = json.decode(paramsJson);

*参数就在Map对象中了，需要导入dart:convert包。

---

至此，原生Android项目中集成Flutter的混编算是迈出了最重要的一步。

下一篇，学习从Flutter界面跳转到其他原生Activity页面通讯。