新版Flutter整合到已有Android專案

FlutterSDK升級後，我們發現不能按照原來的方式整合到已有Android專案中了，因為沒有了Flutter這個類，通過閱讀原始碼我找到了新的使用方式。

一、建立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')

複製程式碼

二、使用Flutter

兩種使用方式，FlutterView和FlutterFragment。

1、使用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。

2、使用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>
複製程式碼

效果如下圖: