成熟項目的Flutter快速引入以及Flutter、Native混合開發探究

時間 2019-11-05

標籤成熟項目 flutter 快速引入以及 native 混合開發探究简体版

原文原文鏈接

本文首發於微信公衆號——世界上有意思的事，搬運轉載請註明出處，不然將追究版權責任。java

又有兩個月沒有發文了，最近我司逐漸開始在成熟的項目中引入 Flutter 做爲一種新的開發方式。做爲比較早吃螃蟹的人，我也在組內爲三四十個同窗作了一次 Flutter 相關的分享。由於涉及了一些內部信息因此等我脫敏整理好以後會用專門的一篇文章進行相關的分享，你們能夠開始期待了，哈哈。至於本篇文章，我會講一些有意思的東西——成熟項目的Flutter快速引入與 Flutter、Native混合開發，但願你們能多多點贊關注。android

閱讀須知：git

1.本篇文章基於 Android 平臺
2.Flutter測試項目——測試、Flutter容器項目——容器

本文分爲如下章節，讀者可按需閱讀：程序員

1.成熟項目的Flutter快速引入——在已有項目中無縫引入Flutter做爲開發的一種方式
2.Flutter、Native混合開發——在一個頁面中同時使用 Flutter 與 Native 兩種技術的開發探究
3.尾巴

Flutter測試項目Githubgithub

Flutter容器項目Github編程

1、成熟項目的Flutter快速引入

如今不少教程都停留在建立一個新的 Flutter 項目而後開始介紹如何使用這個項目開發 Flutter。可是其實咱們目前大部分使用 Flutter 的場景都是基於已經成熟的項目。咱們不可能由於使用 Flutter 而將原來的項目推到重來。這一節我就來介紹一種成熟項目無縫接入 Flutter 的方式。本章須要你們結合上面提到的 Github 項目代碼食用。api

1.閒魚以及美團的實踐

1.目前不少廠商都有着本身的成熟項目的 Flutter 接入實踐，其中美團、閒魚的實踐應該已經運行的比較久了。他們的接入方式主要分下面幾步：
- 1.理清楚 Flutter App 的構建和運行方式。
- 2.修改 Flutter 項目的 Gradle 文件，將 Flutter 項目打包成 AAR 文件。
- 3.將 AAR 文件推送到 Maven 服務器上。
- 4.主工程引入 Flutter 的 AAR 文件，和主工程一塊兒編譯生成主 App。
2.美團的實踐
3.閒魚的實踐

2.個人實踐

從上面的介紹來看，閒魚、美團的實踐方式彷佛有着一些不方便之處。好比說不能動態更新 Flutter 代碼、Flutter 的 AAR 和主工程一塊兒編譯太具備侵入性等等(這裏只是我本身淺薄的見解，有異議的同窗能夠在評論區提出)。因此我這一節要介紹一種侵入性很是小的接入 Flutter 的方式，簡單來講就一句話：動態加載 Flutter 生成的 Apk。接下來我會結合前面提到的兩個 github 項目裏的代碼進行講解，你們必定要把這兩個項目 clone 下來，固然能點個 star 就更好了。安全

(1).建立Flutter測試項目

1.建立一個 Flutter Project，這個很簡單，網上教程不少我就不復述了。
2.建立好了以後如圖1所示，咱們須要在 app 目錄下的 build.gradle 文件中添加一些代碼，如代碼塊1所示。

----代碼塊1，本文發自簡書、掘金：什麼時候夕-----
project.afterEvaluate {
    android.applicationVariants.all { variant ->
        def variantName = variant.name.capitalize()
        def buildTask = project.tasks.findByName("assemble${variantName}")
        if (buildTask) {
            def outputApk = variant.outputs[0].outputFile.path
            def classEntry = "*.dex"
            def soEntry = "lib/*"
            def metaEntry = "META-INF/*"
            def licenseEntry = "assets/flutter_assets/LICENSE"

            buildTask.doLast {
                println variant.outputs[0].outputFile.length()
                exec {
                    commandine 'sh', '-c', "zip -d ${outputApk} ${classEntry}"
                }
                exec {
                    commandLine 'sh', '-c', "zip -d ${outputApk} ${soEntry}"
                }
                exec {
                    commandLine 'sh', '-c', "zip -d ${outputApk} ${metaEntry}"
                }
                exec {
                    commandLine 'sh', '-c', "zip -d ${outputApk} ${licenseEntry}"
                }
            }
        }
    }
}
複製代碼

3.這個代碼的主要功能是將 flutter 生成的 apk 中的 classes.dex、libflutter.so、META-INF 等等不須要的文件都刪掉，由於咱們最終只須要用到 apk 中的 Dart 代碼與圖片資源。
4.代碼加好以後，咱們用命令行運行 flutter build apk --debug，這樣就會生成一個 debug 版的 apk。其大小爲 7.3 MB，沒有添加代碼塊1中的代碼以前 debug 版的 apk 大小爲 33.5 MB。能夠看見這個操做仍是很是有有效果的。而若是是 release 版的 apk，其大小還會進一步縮小到 1.5 MB。

(2).建立Flutter容器項目

1.有了 Flutter 的精簡 apk，接下來咱們須要用一個容器來加載這個 Flutter apk。具體代碼在前面我提到的Flutter 容器項目中，接下來你們就跟隨我來看看這個容器是怎麼加載 Flutter apk 的吧。
2.如圖2，項目中 Flutter 容器是以一個 Android Library 的形式存在的，這樣也方便你們能把這個 lib 引入到本身的工程中。咱們能夠看見 lib 中直接引入的 Flutter.jar，這個 jar 分爲 debug 版和 release 版。jar 中包含了 Flutter 的 java 層代碼，與 so 文件。debug 版本大小爲 7.3MB ，release 版本則是 3.6MB。這就是最終咱們的 apk 會增大的大小，仍是能夠接受的。而包含 Dart 代碼和資源的 apk，咱們能夠經過動態下載來獲取。

----代碼塊2，本文發自簡書、掘金：什麼時候夕-----
public class MainActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    RxPermissions permissions = new RxPermissions(this);
    permissions.setLogging(true);
    permissions.request(Manifest.permission.READ_EXTERNAL_STORAGE)
        .subscribe(aBoolean -> FlutterContainer.init(getApplication(), "/storage/emulated/0/flutter1.apk"));
    findViewById(R.id.aaa).setOnClickListener(v -> startActivity(new Intent(MainActivity.this, Main2Activity.class)));
  }
}
複製代碼

----代碼塊3，本文發自簡書、掘金：什麼時候夕-----
public class FlutterContainer {
  private static final String TAG = "FlutterContainer";
  private static boolean sInitialized = false;
  private static Context sApplicationContext;
  
  private static String sFlutterInstallPath = "";
  
  public static void init(@NonNull Application applicationContext, @NonNull FlutterEngine.PrepareFlutterPackage prepareFlutterPackage) {
    init(applicationContext, null, prepareFlutterPackage, null);
  }
  
  public static void init(@NonNull Application applicationContext, @NonNull String flutterInstallPath) {
    init(applicationContext, flutterInstallPath, null, null);
  }
  
  public static void init(@NonNull Application applicationContext, @NonNull String flutterInstallPath, @Nullable FlutterEngine.Callback startCallBack) {
    init(applicationContext, flutterInstallPath, null, startCallBack);
  }
  
  public static void init(@NonNull Application applicationContext, @NonNull FlutterEngine.PrepareFlutterPackage prepareFlutterPackage, @Nullable FlutterEngine.Callback startCallBack) {
    init(applicationContext, null, prepareFlutterPackage, startCallBack);
  }
  
  /** * 只能在 app 啓動的時候初始化一次 * * @param applicationContext */
  private static void init(@NonNull Application applicationContext, @Nullable String flutterInstallPath, @Nullable FlutterEngine.PrepareFlutterPackage prepareFlutterPackage, @Nullable FlutterEngine.Callback startCallBack) {
    if (sInitialized) {
      return;
    }
    new FlutterManager(applicationContext);
    sInitialized = true;
    sApplicationContext = applicationContext;
    if (!TextUtils.isEmpty(flutterInstallPath)) {
      upgradeFlutterPackage(flutterInstallPath, startCallBack);
    } else if (prepareFlutterPackage != null) {
      upgradeFlutterPackage(prepareFlutterPackage, startCallBack);
    } else {
      Log.i(TAG, "FlutterContainer init no flutter package");
    }
  }
  
  /** * @param flutterInstallPath */
  public static void upgradeFlutterPackage(@NonNull String flutterInstallPath, @Nullable FlutterEngine.Callback startCallBack) {
    if (!sInitialized) {
      return;
    }
    FlutterManager.getInstance().resetFlutterPackage();
    sFlutterInstallPath = flutterInstallPath;
    FlutterManager.getInstance().getFlutterEngine().startFast(startCallBack);
  }
複製代碼

3.接下來咱們看代碼塊2，這是一個例子。能夠看見 FlutterContainer 就是容器庫暴露出來的 api，用於初始化 Flutter 環境以及升級 Flutter Apk。
4.代碼塊2中調用了 init，因此咱們來看看代碼塊3 FlutterContainer 中的 api。
- 1.init：方法用於第一次須要初始化 Flutter apk 的時候調用一次，有多個不一樣的 api。
- 2.upgradeFlutterPackage：則是用於從新加載 Flutter apk，好比咱們須要發佈新的 Flutter 版本，就可使用這個 api 來從新加載一個新的 Flutter apk。

----代碼塊4，本文發自簡書、掘金：什麼時候夕-----
public class FlutterManager {
  
  private static FlutterManager sInstance;
  
  private final FlutterEngine mFlutterEngine;
  private final FlutterContextWrapper mFlutterContextWrapper;
  private final Context mContext;
  
  FlutterManager(Application context) {
    sInstance = this; // 簡單單例, 線程並不安全, 邏輯保證
    mFlutterEngine = new FlutterEngine(context);
    mFlutterContextWrapper = new FlutterContextWrapper(context);
    mContext = context;
  }
  
  public static FlutterManager getInstance() {
    return sInstance;
  }
  
  public void registerChannel(BinaryMessenger messenger, String channel, BaseHandler handler) {
    new MethodChannel(messenger, channel + ".method").setMethodCallHandler(handler);
    if (handler.mEnableEventChannel) {
      new EventChannel(messenger, channel + ".event").setStreamHandler(handler);
    }
  }
  
  FlutterEngine getFlutterEngine() {
    return mFlutterEngine;
  }
  
  public FlutterContextWrapper getFlutterContextWrapper() {
    return mFlutterContextWrapper;
  }
  
  /** * 是否有 Flutter 包可用 * * @return */
  public boolean isFlutterAvailable() {
    File activeApk = new File(FlutterContainer.getFlutterInstallPath());
    return activeApk.isFile();
  }
  
  /** * 若是要使用新的 Flutter 包，那麼須要重置一下 */
  void resetFlutterPackage() {
    mFlutterContextWrapper.reset();
  }
}
複製代碼

5.FlutterContainer 至關於初始化 Flutter apk 的入口，那麼 FlutterManager 就是具體作這件事情的類了。咱們看代碼塊4，能夠了解到 FlutterManager 是一個單例，FlutterContainer.init 中有一個步驟就是初始化這個單例。其中的 api 有下面這些功能：
- 1.registerChannel：註冊 java 和 dart 之間的通訊 channel，這個在後面會詳細講解。
- 2.getFlutterEngine：獲取 FlutterEngine，其內部會調用 Flutter 真正加載 apk 的 api。
- 3.getFlutterContextWrapper：一個 Context 的包裝類，主要是爲了讓 Flutter 能順利解壓出 apk 裏面的代碼和資源。

----代碼塊5，本文發自簡書、掘金：什麼時候夕-----
public class FlutterContextWrapper extends ContextWrapper {

  private AssetManager sAssets;

  FlutterContextWrapper(Context base) {
    super(base);
  }

  public void reset() {
    sAssets = null; // 在每次安裝flutter包以後，須要從新建立新的assets
  }

  @Override
  public Resources getResources() {
    return new Resources(getAssets(), super.getResources().getDisplayMetrics(),
        super.getResources().getConfiguration());
  }

  @Override
  public AssetManager getAssets() {
    if (sAssets != null) {
      return sAssets;
    }

    File activeApk = new File(FlutterContainer.getFlutterInstallPath());
    if (!activeApk.isFile()) {
      return super.getAssets();
    }

    sAssets = ReflectionUtil.newInstance(AssetManager.class);
    ReflectionUtil.callMethod(sAssets, "addAssetPath", activeApk.getPath());
    return sAssets;
  }

  @Override
  public PackageManager getPackageManager() {
    return new FlutterPackageManager(super.getPackageManager());
  }
}
複製代碼

6.由於 Flutter 在 build apk 的時候會將 Dart 代碼和資源都放在 asset 中，因此咱們須要如代碼塊5中那樣，建立一個 FlutterContextWrapper 來替換 AssetManager，使得 Flutter 加載 apk 時 asset 目錄指向咱們建立的 Flutter apk 中。

----代碼塊6，本文發自簡書、掘金：什麼時候夕-----
class FlutterEngine {
  
  private static boolean sInitialized; // 全局標記引擎已經啓動
  private final Context mContext;
  
  FlutterEngine(Context context) {
    mContext = context;
  }
  
  /** * 快速啓動模式，表示已經有包了 */
  void startFast(@Nullable Callback callback) {
    if (sInitialized) {
      // 須要儘快啓動，因此須要去重
      callback(callback, null);
      return;
    }
    if (FlutterManager.getInstance().isFlutterAvailable()) { // 當前有可用包
      startFlutterInitialization();
      ensureInitializationComplete();
      callback(callback, null);
    } else {
      DebugUtil.logError(new RuntimeException("startFast but no available package"));
    }
  }
  
  /** * 慢速啓動模式, 表示沒有報，須要準備 */
  void startSlow(@Nullable Callback callback, @NonNull PrepareFlutterPackage prepareFlutterPackage) {
    Single.fromCallable(() -> {
      // 此處不去重, 不論是否sInitialized都從新初始化, 保證使用最新flutter包.
      prepareFlutterPackage.prepareFlutterPackage();
      return new Object();
    }).subscribeOn(Schedulers.io())
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe(o -> {
          startFlutterInitialization();
          ensureInitializationComplete();
          callback(callback, null);
        }, throwable -> {
          throwable.printStackTrace();
          callback(callback, throwable);
        });
  }
  
  private static void callback(@Nullable Callback callback, Throwable t) {
    if (callback != null) {
      callback.onCompleted(t);
    }
  }
  
  private void startFlutterInitialization() { // 不阻塞UI
    // Flutter SDK的start方法能夠屢次調用, 他的主要做用是解壓資源, 所以不用作去重
    FlutterMain.startInitialization(FlutterManager.getInstance().getFlutterContextWrapper());
  }
  
  private void ensureInitializationComplete() {
    FlutterMain.ensureInitializationComplete(mContext, null);
    sInitialized = true; // 已經初始化
  }
  
  // 啓動回調
  public interface Callback {
    
    /** * 初始化完成. * * @param e 成功爲null，失敗不爲null. */
    void onCompleted(Throwable e);
  }
 
  // 準備 Flutter 包的回調
  public interface PrepareFlutterPackage {
    String prepareFlutterPackage();
  }
}
複製代碼

7.順接 FlutterContainer 的調用繼續深刻，咱們會來到代碼塊6的 FlutterEngine 中，這裏主要有兩個 api：
- 1.startFast：如方法名說的那樣，這個方法表示快速加載 flutter apk。他只能被調用一次，屢次調用會去重，通常來講咱們若是已經準備好了 flutter apk 的話，那麼可使用這個方法來加載 flutter apk。能夠看見其內部最終會調用到 FlutterMain.startInitialization，這是 Flutter.jar 中的 api，主要用於解壓和移動 Context 中的 Asset。由於咱們前面建立了一個 FlutterContextWrapper，因此這裏其實會解壓 flutter apk 中的 Dart 代碼和資源。
- 2.startSlow：這個方法能調用屢次，主要用於升級 apk，屢次調用不會去重。若是咱們沒有準備好 apk，須要從網絡中下載，可使用這個方法。可是最終的原理和 startFast 同樣，都是使用 FlutterMain.startInitialization 來解壓和移動 Flutter apk 中的資源。
8.到這裏成熟項目中無縫引入 Flutter 就完成了。你們能夠編譯Flutter容器項目而後將Flutter測試項目生成的 apk adb push 到手機的 /storage/emulated/0/flutter1.apk 中，就能體驗到動態加載 Flutter apk 的快感了。
9.另外你還可使用 flutter attch 來對 debug 版的 Flutter apk 進行 hot reload，享受到秒級代碼更新的快感。

2、Flutter、Native混合開發

前面完了在成熟項目中無縫引入 Flutter 的方式，這一章咱們再來講說 Flutter 和 Native 混合開發的方式。可能會混合開發不是很簡單嗎，直接嵌入一個 Flutter 的 Activity/Fragment 就能將其做爲容器運行 Flutter 了。其實這樣的想法太過理想化，若是個人一個 Acitivity/Fragment 中 Flutter 和 Native 都須要有呢？這一章我我就是要來解決這個問題，你們隨我一塊兒往下看。服務器

1.Flutter、Native混合開發場景以及閒魚的實踐

1.咱們先來聊聊在什麼狀況下在 Activity/Fragment 中會須要 Flutter、Native 一塊兒使用
- 1.好比個人一個界面上須要嵌入地圖 view，此時若是我須要在這個界面上使用 Flutter 的話，由於 Flutter 的組件遠沒有 Native 這麼完善，像高德地圖、百度地圖目前都只有 Native 的版本，因此此時就須要 Flutter、Native 混合開發了。
- 2.再拿目前比較火的短視頻 App 們來作例子，例如抖音 App 的視頻編輯功能，視頻編輯的大部分功能都是基於 Native 層的視頻編輯 sdk 來開發的。若是這種界面要上 Flutter 的話，整個視頻編輯 sdk 須要提供一 Dart 的版本，這在短期內都是沒法實現的。
- 3.有了上面兩個例子，咱們如今大概能夠知道在什麼場景下須要在一個界面上使用 Flutter、Native 進行混合開發了：**Flutter 的控件還沒法代替 Native 的控件時，若是某個界面須要上 Flutter 的話，就會出現這樣的場景。**雖然隨着 Flutter 的慢慢發展，慢慢可能會有 Flutter 版的地圖、Flutter 版的視頻編輯 sdk，可是在最近一兩年內，Flutter、Native 混合開發仍是一個很是常見的場景。
2.那麼咱們再來聊聊目前已經有的混合開發的實踐，目前閒魚有寫過博客分享本身的混合開發實踐：閒魚的混合開發實踐。
- 1.使用 Flutter 提供的 api 將 Android 端的 View 交給 Flutter。
- 2.由於 Flutter 渲染的方式是 SurfaceView 或者 TextureView，因此 Android 端的 View 會生成一個 Texture(OpenGL的紋理)，交給 Flutter 而後讓 Flutter 一塊兒渲染在 Surface/TextureVIew 上。
- 3.相應的手勢也由 Flutter 層傳遞給 Android 層。
3.閒魚的實踐方式固然有它們的優點，例如是官方推薦的實踐方式、通用性更好等等。可是其有不可忽視的缺點就是Android View 的 Texture 傳遞到 Flutter 的流程是 GPU->CPU->GPU，這是一套昂貴的方案。

2.個人實踐

爲了解決數據傳遞的昂貴耗損，我想了另一個辦法來繞過這個問題。本小結須要結合Flutter容器項目食用。微信

1.咱們首先得了解 Flutter 在 Android 端渲染的幾個前置知識：
- 1.Flutter 在開始運行以後，畫面是渲染到 Android 端的 SurfaceView/TextureView 上面的。
- 2.要深刻了解 SurfaceView 和 TextureView，能夠看這篇文章：Android繪製機制以及Surface家族源碼全解析。
- 3.Flutter 若是用 SurfaceView 渲染，底層默認是黑的。
- 4.Flutter 若是用 TextureView 渲染，底層默認是透明的。
- 5.綜上所述，若是當咱們使用 TextureView 渲染 Flutter 的時候，咱們能夠只將 Flutter 當作 Android 視圖層級中的一個普通的 view，它能夠在某些 View 的上面或者下面。這就是咱們的解決方案：再也不把 Flutter 當作一個 Activity 的所有，它只是 View 層級中的一份子，這樣一來咱們想對這個 View 作啥就作啥。

2.在瞭解了混合開發的思想以後代碼上就很是簡單了。

1.首先咱們得知道除了 io.flutter.app.FlutterActivity，這個通常咱們使用的 Acitivty 外。Flutter 還提供了另外一個 io.flutter.embedding.android.FlutterActivity Acitvity，這個 Activity 渲染 Flutter 的方式之一就是使用 TexutreView。
2.固然最後 io.flutter.embedding.android.FlutterAcitivity 仍是經過 io.flutter.embedding.android.FlutterFragment 來將 TextureView 添加到 View 的層級中的。

----代碼塊7，本文發自簡書、掘金：什麼時候夕-----
public class FlutterTextureBaseFragment extends FlutterFragment {
  protected FlutterView mFlutterView;
  protected FlutterContextWrapper mFlutterContextWrapper;
  
  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = super.onCreateView(inflater, container, savedInstanceState);
    mFlutterView = ViewUtil.getFlutterView(view);
    mFlutterContextWrapper = new FlutterContextWrapper(getContext());
    return mFlutterView;
  }
  
  @Nullable
  public FlutterView getFlutterView() {
    return mFlutterView;
  }
  
  public static class TextureBuilder extends FlutterFragment.Builder {
    @NonNull
    public <T extends FlutterFragment> T build() {
      try {
        T frag = (T) FlutterTextureBaseFragment.class.newInstance();
        if (frag == null) {
          throw new RuntimeException("The FlutterFragment subclass sent in the constructor (" + FlutterTextureBaseFragment.class.getCanonicalName() + ") does not match the expected return type.");
        } else {
          Bundle args = this.createArgs();
          frag.setArguments(args);
          return frag;
        }
      } catch (Exception var3) {
        throw new RuntimeException("Could not instantiate FlutterFragment subclass (" + FlutterTextureBaseFragment.class.getName() + ")", var3);
      }
    }
  }
  
  @Override
  public Context getContext() {
    if (mFlutterContextWrapper == null) {
      return super.getContext();
    } else {
      return mFlutterContextWrapper;
    }
  }
}
複製代碼

3.咱們看代碼塊7，FlutterFragment.Builder 是構建 io.flutter.embedding.android.FlutterFragment 的 Buidler 類，個人 FlutterTextureBaseFragment 主要是爲了提供 FlutterView 給外界使用。

----代碼塊8，本文發自簡書、掘金：什麼時候夕-----
public class FlutterTextureBaseActivity extends FlutterActivity {
  protected FlutterView mFlutterView;
  protected FlutterTextureBaseFragment mFlutterTextureBaseFragment;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  }
  
  @Nullable
  public ViewGroup getFlutterViewParent() {
    getFlutterView();
    if (mFlutterView == null) {
      return null;
    } else {
      return (ViewGroup) mFlutterView.getParent();
    }
  }
  
  @Nullable
  public FlutterView getFlutterView() {
    if (mFlutterTextureBaseFragment == null) {
      return null;
    } else if (mFlutterTextureBaseFragment.getView() != null) {
      mFlutterView = mFlutterTextureBaseFragment.getFlutterView();
      return mFlutterView;
    } else {
      return null;
    }
  }
  
  @Nullable
  public FlutterTextureBaseFragment getFlutterTextureBaseFragment() {
    return mFlutterTextureBaseFragment;
  }
  
  @NonNull
  protected FlutterTextureBaseFragment createFlutterFragment() {
    mFlutterTextureBaseFragment = (new FlutterTextureBaseFragment.TextureBuilder())
        .dartEntrypoint(this.getDartEntrypoint())
        .initialRoute(this.getInitialRoute())
        .appBundlePath(this.getAppBundlePath())
        .flutterShellArgs(FlutterShellArgs.fromIntent(this.getIntent()))
        .renderMode(FlutterView.RenderMode.texture)
        .transparencyMode(FlutterView.TransparencyMode.opaque)
        .build();
    return mFlutterTextureBaseFragment;
  }
}
複製代碼

4.在看代碼塊8，FlutterTextureBaseActivity 繼承了 io.flutter.embedding.android.FlutterActivity，主要工做是建立一個以 TexutreVIew 做爲渲染方式的 FlutterTextureBaseFragment，而後提供 FlutterView 的 ParentView，以供外部使用。
5.瞭解了上面的代碼以後，你們要在一個 Activity 中進行混合開發也就很是簡單了。例如我須要用 Flutter 仿寫抖音 App 的視頻編輯頁，就能夠有以下步驟：
- 1.繼承 FlutterTextureBaseActivity 後，將視頻編輯 sdk 的 View 放在 FlutterView 的下面，此時 FlutterView 就會透出視頻編輯 View。
- 2.在 Flutter 中開發業務邏輯
- 3.使用 Channel 讓 Flutter 中的行爲操做視頻編輯 View。
6.我使用我司的視頻編輯 sdk 簡單的實踐了一下視頻播放和暫停的功能，以下圖3
- 1.下面的視頻播放器是 Android 端 Native 的代碼。
- 2.上面的兩個 play 和 stop 的 button 是 Flutter 的代碼。
- 3.由於是公司內部代碼，因此不能放在 github 上面，你們見諒。