目錄

一、Flutter_Boost是什么

二、準備工作

三、已經有Native項目

1、命令行進入項目目錄

2、運行：flutter create -t module flutter_lib命令，flutter_lib這個名字自己起，代表flutter module的名稱，運行完畢如下圖。

3、編譯android模板項目

4、在native項目的app的 build.gradle文件中添加 java8的支持

5、在native項目的settings.gradle文件中增加如下配置，關聯flutter_lib,重點是要配置include_flutter.groovy文件的路勁，添加完畢后同步項目

6、native的app的build.gradle文件中添加flutter依賴并同步

7、添加flutter-boost，在flutter_lib的pubspec.yaml文件中添加如下依賴，這里是根據flutter_boost的github文檔添加

8、檢查鏈接是否正確，使用：flutter build apk命令檢查是否完成flutter_boost和其他庫的依賴，如果出現錯誤根據錯誤解決所有錯誤直到編譯成功為止。9、native端flutter_boost初始化配置

Flutter-boost是咸魚開源的一個flutter插件，是一個flutter-native混合開發解決方案，今天聊一聊flutter-boost如何集成到android原生項目

一、Flutter_Boost是什么

新一代Flutter-Native混合解決方案。 FlutterBoost是一個Flutter插件，它可以輕松地為現有原生應用程序提供Flutter混合集成方案。FlutterBoost的理念是將Flutter像Webview那樣來使用。在現有應用程序中同時管理Native頁面和Flutter頁面并非易事。 FlutterBoost幫你處理頁面的映射和跳轉，你只需關心頁面的名字和參數即可（通常可以是URL）。

二、準備工作

1、flutter sdk 的版本需要 v1.9.1-hotfixes分支，否則會編譯失敗.

2、原生項目最好先換成support庫，androidx會出現意想不到的問題

3、保證flutter的運行環境正常

三、已經有Native項目

1、命令行進入項目目錄

搭建Flutter-Native混合工程，并集成咸魚Flutter_boost

image.gif

?

2、運行：flutter create -t module flutter_lib命令，flutter_lib這個名字自己起，代表flutter module的名稱，運行完畢如下圖。

image

image.gif

?

這個時候你的native工程下會出現一個“flutter_lib”的目錄，如下圖

image

image.gif

?

3、編譯android模板項目

命令行進入 ".android"目錄下，執行“gradlew flutter:assembleDebug”命令，運行完畢后會在 .android/Flutter/build/outputs/aar/目錄下生成flutter-debug.aar

4、在native項目的app的 build.gradle文件中添加 java8的支持

image

image.gif

?

5、在native項目的settings.gradle文件中增加如下配置，關聯flutter_lib,重點是要配置include_flutter.groovy文件的路勁，添加完畢后同步項目

image

image.gif

?

6、native的app的build.gradle文件中添加flutter依賴并同步

implementation project(':flutter')

image.gif

7、添加flutter-boost，在flutter_lib的pubspec.yaml文件中添加如下依賴，這里是根據flutter_boost的github文檔添加

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_boost:
    git:
      url: 'https://github.com/alibaba/flutter_boost.git'
      ref: '0.1.60'

image.gif

8、檢查鏈接是否正確，使用：flutter build apk命令檢查是否完成flutter_boost和其他庫的依賴，如果出現錯誤根據錯誤解決所有錯誤直到編譯成功為止。

9、native端flutter_boost初始化配置

第一步：app的build.gradle文件中添加flutter_boost依賴

image

image.gif

?

第二步：自定義Application并在onCreate中初始化flutter_boost

public class MyApplication extends Application {
    private final static String TAG = MyApplication.class.getSimpleName();

    @Override
    public void onCreate() {
        super.onCreate();
        //路由,Flutter 啟動Native頁面的時候回調這里
        INativeRouter router = new INativeRouter() {
            @Override
            public void openContainer(Context context, String url, Map<String, Object> urlParams, int requestCode, Map<String, Object> exts) {
                Log.i(TAG, "路由--INativeRouter:url=" + url);
                Log.i(TAG, "路由--INativeRouter:requestCode=" + requestCode);
                Log.i(TAG, "路由--INativeRouter:urlParams=" + urlParams);
                Log.i(TAG, "路由--INativeRouter:exts=" + exts);

                String assembleUrl = Utils.assembleUrl(url, urlParams);
                PageRouter.openPageByUrl(context, assembleUrl, urlParams);
            }
        };
        //插件注冊
        FlutterBoost.BoostPluginsRegister pluginsRegister = new FlutterBoost.BoostPluginsRegister() {
            @Override
            public void registerPlugins(PluginRegistry mRegistry) {
                GeneratedPluginRegistrant.registerWith(mRegistry);
                //注冊native的TextView插件，插件名稱：TextPlatformViewPlugin
                TextPlatformViewPlugin.register(mRegistry.registrarFor("TextPlatformViewPlugin"));
            }
        };
        //配置
        Platform platform = new FlutterBoost.ConfigBuilder(this, router)
                .isDebug(true)
                .whenEngineStart(FlutterBoost.ConfigBuilder.ANY_ACTIVITY_CREATED)
                .renderMode(FlutterView.RenderMode.texture)
                .pluginsRegister(pluginsRegister)
                .build();

        //初始化flutter_boost
        FlutterBoost.instance().init(platform);
    }
}

image.gif

第三步：在Native的Activity中編寫調用代碼，native調用flutter，通過傳入url和params打開對應的Flutter widget

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btnOpenNative;
    private Button btnOpenFlutter;
    private Button btnOpenFlutterFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnOpenNative = findViewById(R.id.btnOpenNativePage);
        btnOpenFlutter = findViewById(R.id.btnOpenFlutterPage);
        btnOpenFlutterFragment = findViewById(R.id.btnOpenFlutterFragment);

        btnOpenNative.setOnClickListener(this);
        btnOpenFlutter.setOnClickListener(this);
        btnOpenFlutterFragment.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Map<String, String> params = new HashMap<>();
        params.put("test1", "v_test1");
        params.put("test2", "v_test2");
        switch (v.getId()) {
            case R.id.btnOpenNativePage:
                PageRouter.openPageByUrl(this, PageRouter.NATIVE_PAGE_URL, params);
                break;
            case R.id.btnOpenFlutterPage:
                //打開一個flutter頁面
                PageRouter.openPageByUrl(this, PageRouter.FLUTTER_PAGE_URL, params);
                break;
            case R.id.btnOpenFlutterFragment:
                //打開一個flutter創建的fragment的activity原生page
                PageRouter.openPageByUrl(this, PageRouter.FLUTTER_FRAGMENT_PAGE_URL, params);
                break;
        }
    }
}

image.gif

頁面路由控制的輔助類PageRouter的實現，它負責管理Native到Flutter的路由調用以及Flutter調用Native的路由

public class PageRouter {

    public final static Map<String, String> pageName = new HashMap<String, String>() {{

        put("first", "first");
        put("second", "second");
        put("tab", "tab");
        put("sample://flutterPage", "flutterPage");
    }};

    public static final String NATIVE_PAGE_URL = "sample://nativePage";
    public static final String FLUTTER_PAGE_URL = "sample://flutterPage";
    public static final String FLUTTER_FRAGMENT_PAGE_URL = "sample://flutterFragmentPage";

    public static boolean openPageByUrl(Context context, String url, Map params) {
        return openPageByUrl(context, url, params, 0);
    }

    public static boolean openPageByUrl(Context context, String url, Map params, int requestCode) {

        String path = url.split("\\?")[0];

        Log.i("openPageByUrl", path);

        try {
            if (pageName.containsKey(path)) {
                //打開指定url的flutter頁面
                Intent intent = BoostFlutterActivity.withNewEngine().url(pageName.get(path)).params(params)
                        .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(context);
                if (context instanceof Activity) {
                    Activity activity = (Activity) context;
                    activity.startActivityForResult(intent, requestCode);
                } else {
                    context.startActivity(intent);
                }
                return true;
            } else if (url.startsWith(FLUTTER_FRAGMENT_PAGE_URL)) {
                //打開flutter創建的fragment
                context.startActivity(new Intent(context, FlutterFragmentPageActivity.class));
                return true;
            } else if (url.startsWith(NATIVE_PAGE_URL)) {
                //打開原生Activity
                context.startActivity(new Intent(context, NativePageActivity.class));
                return true;
            }
            return false;
        } catch (Throwable t) {
            return false;
        }
    }
}

image.gif

Flutter側代碼實現，在flutter側直接實現對應的Widget，最后根據路由pageName將其返回給native即可

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:flutter_lib/page_widgets.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    ///FlutterBoost注冊，給Native返回Flutter的pageWidget
    FlutterBoost.singleton.registerPageBuilders({
      'flutterFragment': (pageName, params, _) => FragmentRouteWidget(params),

      ///可以在native層通過 getContainerParams 來傳遞參數
      'flutterPage': (pageName, params, _) {
        print("flutterPage params:$params");
        return FlutterRouteWidget(params: params);
      },
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Boose example',
      builder: FlutterBoost.init(postPush: _onRoutePushed),
      home: Container(),
    );
  }

  ///
  /// 當Native調用flutter widget時回調
  ///
  void _onRoutePushed(
      String pageName, String uniqueId, Map params, Route route, Future _) {
    print("flutter端路由：pageName:$pageName\n params:$params\n route:$route");
  }
}

image.gif

FlutterRouteWidget組件實現，一個flutter實現的native Activity頁面

///
/// flutter提供給native的頁面widget
///
class FlutterRouteWidget extends StatefulWidget {
  //構造方法，接受native傳遞的參數
  FlutterRouteWidget({this.params, this.message});

  final Map params;
  final String message;

  @override
  State<StatefulWidget> createState() {
    return _FlutterRouteWidgetState();
  }
}

class _FlutterRouteWidgetState extends State<FlutterRouteWidget> {
  @override
  Widget build(BuildContext context) {
    final String message = widget.message;
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        textTheme: new TextTheme(title: TextStyle(color: Colors.black)),
        title: Text('flutter_boost_example'),
      ),
      body: Container(
        margin: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(top: 10.0, bottom: 20.0),
              child: Text(
                message ??
                    "This is a flutter activity\n params:${widget.params}",
                style: TextStyle(fontSize: 28.0, color: Colors.blue),
              ),
              alignment: AlignmentDirectional.center,
            ),
            InkWell(
              child: Container(
                padding: const EdgeInsets.all(8.0),
                margin: const EdgeInsets.all(8.0),
                color: Colors.yellow,
                child: Text(
                  'open native page',
                  style: TextStyle(fontSize: 22.0, color: Colors.black),
                ),
              ),

              ///點擊事件，打開Native
              ///后面的參數會在native的IPlatform.startActivity方法回調中拼接到url的query部分。
              ///例如：sample://nativePage?aaa=bbb
              onTap: () => FlutterBoost.singleton
                  .open("sample://nativePage", urlParams: {
                "query": {"aaa": "bbb"}
              }),
            )
          ],
        ),
      ),
    );
  }
}

image.gif

FragmentRouteWidget組件實現，flutter實現的native的Fragment

image.gif

///
/// flutter實現的fragment
///
class FragmentRouteWidget extends StatelessWidget {
  FragmentRouteWidget(this.params);

  final Map params;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter_boost_example'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(top: 80.0),
            child: Text(
              "This is a flutter fragment",
              style: TextStyle(fontSize: 28.0, color: Colors.blue),
            ),
            alignment: AlignmentDirectional.center,
          ),
          InkWell(
            child: Container(
                padding: const EdgeInsets.all(8.0),
                margin: const EdgeInsets.all(8.0),
                color: Colors.yellow,
                child: Text(
                  'open native page',
                  style: TextStyle(fontSize: 22.0, color: Colors.black),
                )),
            onTap: () => FlutterBoost.singleton.open("sample://nativePage"),
          )
        ],
      ),
    );
  }
}

image.gif

第四步：AndroidMenifest文件的配置，注冊BoostFlutterActivity，這個類必須注冊不然無法啟動Flutter Widget，在所有需要啟動Flutter Widget的Activity注冊時都需要加入 ：android：hardwareAccelerated="true”這個屬性。

 <!--        這個必須注冊，不然無法打開flutter的頁面-->
        <activity
            android:name="com.idlefish.flutterboost.containers.BoostFlutterActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:screenOrientation="portrait"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/page_loading" />

        </activity>

image.gif

以上步驟都走完之后就可以編譯運行了，本次的重點在于講解Native項目怎么樣集成flutter并引入Flutter_boost，關于flutter_boost的具體用法后面會推出。

最后貼出我最終運行后的結果圖：

圖1 點擊 “打開Flutter頁面”---->圖2，點擊“open native page” ----->圖3

image

image.gif

image

image.gif

image

image.gif

?

我的博客：https://blog.csdn.net/qq_19979101

flutter-boot搭建flutter混合項目：https://blog.csdn.net/qq_19979101/article/details/103777979