新版Flutter集成到已有Android項目

FlutterSDK升級後，咱們發現不能按照原來的方式集成到已有Android項目中了，由於沒有了Flutter這個類，經過閱讀源碼我找到了新的使用方式。

1、建立Flutter Module

在已有Android工程中集成flutter，能夠使用AndroidStudio的new Flutter Module實現，方便快捷。

找到FlutterModule，一連串的next操做便可

建立完成後咱們的項目中會多一個叫作flutter的module

而且在項目的setting.gradle文件中會自動添加以下幾行代碼，

setBinding(new Binding([gradle:this]))
evaluate(
        new File(
                settingsDir,
                'flutter_module/.android/include_flutter.groovy'
        )
)
include ':flutter_module'
複製代碼

最後咱們只需在app的build.gradle中引用這個flutter模塊便可

implementation project(path: ':flutter')

複製代碼

2、使用Flutter

兩種使用方式，FlutterView和FlutterFragment。

一、使用FlutterFragment

新版本的FlutterSDK再也不支持已經沒有Flutter類，再也不支持諸如Flutter.createView()、Flutter.createFragment()等用法，經過閱讀其源碼咱們能夠找到FlutterFragment的新用法，代碼以下：

public class MyFlutterActivity extends FragmentActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.flutter_layout);
        //FlutterFragment fragment=new FlutterFragment();
        FlutterFragment fragment=FlutterFragment.withNewEngine().initialRoute("home").build();
        getSupportFragmentManager().beginTransaction().add(R.id.flutter_container, fragment).commit();
    }
}
複製代碼

代碼中FlutterFragment的建立也能夠直接使用默認的構造方法，這樣加載main.dart中的默認路由，即''/''，給出的示例代碼中咱們經過調用FlutterFragment.withNewEngine().initialRoute("home").build()建立了新的NewEngineFragmentBuilder來構建指定路由的FlutterFragment。

二、使用FlutterView

FlutterView的建立一樣不能使用老版本的方法了，新版本的使用方法代碼以下：

public class MyFlutterActivity extends FragmentActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.flutter_layout);
        FrameLayout frameLayout=findViewById(R.id.flutter_container);
        ProgressBar progress=findViewById(R.id.progress);
        //建立FlutterView
        FlutterView flutterView=new FlutterView(this);
        //建立FlutterView首幀渲染完成監聽
        flutterView.addFirstFrameListener(new FlutterView.FirstFrameListener() {
            @Override
            public void onFirstFrame() {
                //隱藏進度條，顯示FlutterView
                progress.setVisibility(View.GONE);
                frameLayout.setVisibility(View.VISIBLE);
            }
        });
        //建立dart代碼執行器
        DartExecutor executor=flutterView.getDartExecutor();
        //執行main.dart中的main函數
        executor.executeDartEntrypoint(
                new DartExecutor.DartEntrypoint(FlutterMain.findAppBundlePath(),
                        "main"));
        //將FlutterView添加到佈局中
        ViewGroup.LayoutParams layoutParams=new LinearLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.MATCH_PARENT);
        frameLayout.addView(flutterView);
    }
}
複製代碼

佈局文件以下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
    <FrameLayout android:id="@+id/flutter_container" android:visibility="invisible" android:layout_width="match_parent" android:layout_height="match_parent">

    </FrameLayout>
    <ProgressBar android:id="@+id/progress" android:layout_width="45dp" android:layout_height="45dp" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:visibility="visible" >
    </ProgressBar>
</RelativeLayout>
複製代碼

效果以下圖: