Flutter與Native的混合開發之--Andriod專案呼叫Flutter專案頁面-初探

     目前Flutter比較流行，對於目前前端同學來說，，學習Flutter的來說，相對來說不是那麼難，學習曲線還好，而相對於有Android或者IOS開發經驗的同學來說，可能會更容易一點，如果是光學些Flutter和Dart方面的東西來說，可以按照其官方提供的api來進行學習即可，這都是入門Flutter的必要途徑，當學習Flutter一段時間之後，就會遇到Flutter如何與Android和Ios進行混合式開發，也就是說Flutter專案和andriod、ios做的app專案，它們之間的頁面如何相互呼叫，這裡我們就只對Android端如何來呼叫Flutter的專案進行一個入門介紹，有兩原生端開發經驗的同學，針對這個那可能就是秒懂了。

   在實現這兩者之間的呼叫之前，我們先準備兩個專案(Android 端 和Flutter 端)

一、準備工作，這裡先上介面

1. Flutter 原生專案介面

flutter create -t module flutter_module複製程式碼

4.修改/Users/xxxx/flutter_hybrid/FlutterHybridAndroid/settings.gradle，在改檔案新增如下內容：

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

5.修改/Users/xxx/flutter_hybrid/FlutterHybridAndroid/app/build.gradle 檔案，在該檔案新增如下配置：

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}複製程式碼

implementation project(':flutter')複製程式碼

8.Android專案對Flutter專案的呼叫方式可以通過以下兩種方式來實現

• 使用Flutter.createView API 的方式
• 使用FlutterFragment 的方式

9. 修改Android專案中的java中新增對Flutter模組呼叫的程式碼，在android原生專案的/FlutterHybridAndroid/app/src/main/res/layout/activity_main.xml中新增元素

<Button 
android:id="@+id/test"    
android:layout_width="wrap_content"    
android:layout_height="wrap_content"    
android:text="在android專案中呼叫Flutter頁面並傳遞引數1"
/>
<Button 
android:id="@+id/test2"   
android:layout_width="wrap_content"    
android:layout_height="wrap_content"    
android:text="在android專案中呼叫Flutter頁面並傳遞引數2"
/>複製程式碼

//1.使用FlutterFragment的方式，在頁面上新增test按鈕的點選事件
final String initParams = "這是來自android專案中的引數";
findViewById(R.id.test).setOnClickListener(        
    new View.OnClickListener() {            
       @Override         
       public void onClick(View v) {                          
         FragmentTransaction tx = getSupportFragmentManager().beginTransaction();                
            tx.replace(R.id.someContainer,Flutter.createFragment(initParams));                
            tx.commit();            
        }        
    });
//2.使用Flutter.createView API的方式，在頁面上新增test按鈕的點選事件
findViewById(R.id.test2).setOnClickListener(
        new View.OnClickListener() { 
        @Override            
        public void onClick(View v) {
          View flutterView = Flutter.createView( 
            MainActivity.this,
            getLifecycle(),
            initParams                
          );                
         FrameLayout.LayoutParams  layout  = new FrameLayout.LayoutParams(600,800);                
           layout.leftMargin = 100;                
           layout.rightMargin = 200;                
           layout.topMargin = 300;                
           addContentView(flutterView,layout);            
         }        
 });複製程式碼

12.如果AndroidStudio 升級到3.0以上版本時候，這個時候專案如果從原來的Android升級或者遷移到AndroidX時，原來Android中的一些包名會和升級或者遷移到AndroidX時一些包名衝突，這個時候需要解決包名衝突的問題，要不然專案無法執行，解決步驟如下：

android.useAndroidX=true
android.enableJetifier=true複製程式碼

//import android.support.annotation.NonNull;
//import android.support.v4.app.Fragment;
import androidx.annotation.NonNull;
import androidx.fragment.app.*;複製程式碼

/*
import android.arch.lifecycle.Lifecycle;
import android.arch.lifecycle.LifecycleObserver;
import android.arch.lifecycle.OnLifecycleEvent;
*/
import androidx.lifecycle.*;複製程式碼

import 'dart:ui';複製程式碼

（2）在Flutter頁面接受傳遞過來的引數如下圖,能看到下面表示Android 專案 呼叫Flutter專案成功了。

總結，心動不如行動，看都是問題，做才是答案，只有經過親自動手實踐才能明白其流程是怎麼樣的，給大家一起分享一下，希望能給大家帶來一點幫助，避免採坑。