Android与Flutter混合开发之flutter_boost

一、背景

近期在做Android项目转型为Flutter，在转型的过程中，我们选择的是各业务模块逐各替换的方式。这种方式下必然会涉及到Android与Flutter的交互，而阿里提供的flutter_boost就是交互之作。

二、demo介绍

github:https://github.com/zbyJade/AndroidWithFlutter.git
如果下载后请进行如下操作

image.png

如果还报错请重启

image.png

功能介绍：

1. Android原生界面跳转Flutter界面，并传参

2. Flutter界面跳转Android原生界面，并传参

3. Android和Flutter在同一界面显示

   

   1.jpg

2.jpg

3.jpg

4.jpg

三、创建flutter_module

1.为了使demo代码简洁，新建一个Android工程，我用的是AS 3.6.3

image.png

image.png

2.新建flutter module

image.png

image.png

Project location 建议选择到你的Android project下，这样较清晰

image.png

image.png

3.添加配置(AS 3.6会自动生成)

Project Settings

evaluate(new File(
  settingsDir,
  'flutter_module/.android/include_flutter.groovy'
))

include ':flutter_module'

app build.grade

implementation project(path: ':flutter')

4.创建module后，产生的问题和解决办法（如果没有出现更好）

问题1：该Wring可忽略

image.png

问题2：

image.png

定位到问题文件，可删除框内文件

image.png

四、依赖flutter_boost

https://pub.dev/

image.png

如果你使用了Androidx找到兼容的版本

image.png

添加flutter_boost最新依赖

image.png

实现过程如下

flutter_boost: ^1.12.13+1

image.png

image.png

如果要是没有出现flutter和flutter_boost的module就稍微等一会

image.png

添加module

image.png

image.png

五、使用flutter_boost

5.1 封装PageRouter，界面跳转的路由工具类

public class PageRouter {
    // 界面格式可自定义
    public final static String OnePageUrl = "url://onePage";
    public final static String NativePage = "url://nativePage";

    public final static Map<String, String> pageName = new HashMap<String, String>() {{
        put(OnePageUrl, "onePage");
    }};


    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 flutterPage = null;
        if (url.startsWith(OnePageUrl)) {
            flutterPage = pageName.get(OnePageUrl);
            Intent intent = BoostFlutterActivity.withNewEngine().url(flutterPage).params(params)
                    .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(context);
            context.startActivity(intent);
            return true;
        } else if (url.startsWith(NativePage)) {
            String aNative = (String) params.get("native");
            Bundle bundle = new Bundle();
            bundle.putString("native", aNative);
            context.startActivity(new Intent(context, NativePageActivity.class).putExtras(bundle));
            return true;
        }
        return false;
    }
}

5.2 Application中初始化（记着在AndroidManifest里引入BaseApplication）

public class BaseApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // 初始化
        initFlutterBoost();
    }

    private void initFlutterBoost() {
        Platform platform = new FlutterBoost.ConfigBuilder(this, new INativeRouter(){

            @Override
            public void openContainer(Context context, String url, Map<String, Object> urlParams, int requestCode, Map<String, Object> exts) {
                String assembleUrl = Utils.assembleUrl(url, urlParams);
                PageRouter.openPageByUrl(context, assembleUrl, urlParams);
            }
        }).isDebug(true)
                .whenEngineStart(FlutterBoost.ConfigBuilder.ANY_ACTIVITY_CREATED)
                .build();

        FlutterBoost.instance().init(platform);
    }
}

5.3 声明BoostFlutterActivity

   <!-- 声明加载flutter界面的activity-->
        <activity
            android:name="com.idlefish.flutterboost.containers.BoostFlutterActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize">
            <!--添加loading-->
            <!--如果不添加meta-data会出现黑色闪屏-->
            <!--如果只添加name，不添加resource会运行不起来-->
            <!--resource需设置一个loading图片-->
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/svg_loading_page" />
        </activity>

5.4 activity跳转flutter界面，并传递参数

  findViewById(R.id.bt1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 将map传递到flutter界面
                HashMap<String, String> params = new HashMap<>();
                params.put("OneKey","从Android跳转到Flutter界面");
                PageRouter.openPageByUrl(MainActivity.this, PageRouter.OnePageUrl, params);
            }
        });

5.5 flutter界面跳转activity，并传递参数

 children: <Widget>[
            // 如果接收到参数则显示，OneKey为传递map中的key
            Text(widget.param == null ? "未接收到参数" : widget.param["OneKey"]),
            RaisedButton(
                child: Text("调回Android界面"),
                onPressed: () {
                  // url://nativePage为PageRouter界面定义的，flutter调起Android界面
                  FlutterBoost.singleton.open("url://nativePage",
                      urlParams: {"native": "我是参数乙"});
                }),
            RaisedButton(
                child: Text("关闭当前界面"),
                onPressed: () {
                  Navigator.of(context).pop();
                }),
          ],

5.6 Android和flutter混合界面

public class NativeAndFlutterActivity extends AppCompatActivity implements SplashScreenProvider {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_native_and_flutter);
        // 将flutter界面作为fragment添加到FrameLayout上
        FlutterFragment mFragment = new FlutterFragment.NewEngineFragmentBuilder().url("fragmentPage").build();
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.fragment_stub, mFragment)
                .commit();
    }

    @Override
    public SplashScreen provideSplashScreen() {
        // 为显示加载loading
        Drawable manifestSplashDrawable = getSplashScreenFromManifest();
        if (manifestSplashDrawable != null) {
            return new DrawableSplashScreen(manifestSplashDrawable, ImageView.ScaleType.CENTER, 500L);
        } else {
            return null;
        }
    }

    protected static final String SPLASH_SCREEN_META_DATA_KEY = "io.flutter.embedding.android.SplashScreenDrawable";
    private Drawable getSplashScreenFromManifest() {
        try {
            @SuppressLint("WrongConstant") ActivityInfo activityInfo = getPackageManager().getActivityInfo(
                    getComponentName(),
                    PackageManager.GET_META_DATA | PackageManager.GET_ACTIVITIES
            );
            Bundle metadata = activityInfo.metaData;
            Integer splashScreenId = metadata != null ? metadata.getInt(SPLASH_SCREEN_META_DATA_KEY) : null;
            return splashScreenId != null
                    ? Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP
                    ? getResources().getDrawable(splashScreenId, getTheme())
                    : getResources().getDrawable(splashScreenId)
                    : null;
        } catch (PackageManager.NameNotFoundException e) {
            // This is never expected to happen.
            return null;
        }
    }
}

结尾

本篇文章仅介绍了flutter_boost的基础使用。更加详细的demo 代码请到github上下载。希望对读者flutter学习过程有所帮助。