Flutter 1.12 mixed development practice

preface

The official Release of Flutter 1.12 has introduced add-to-app integration to quickly integrate existing Flutter applications into existing native applications. Dev /docs/develo… Compared with previous versions, Flutter 1.12 has major changes in its integration, plugin registration, and some API changes. Based on Flutter 1.12, this article will give a hands-on experience in the hybrid development of Flutter on Android platform.

A problem with Flutter Engine in mixed development

The Engine is recreated when a new Flutter page is opened. CachedEngine is provided, but the route cannot be changed after initialization. If there are multiple Flutter pages that need to be opened in different places, you still need to create different engines, or switch pages via native Flutter communication. Repeated Engine creation that is not released in a timely manner can lead to long startup times and increased memory stress, so singleton Engine is necessary. Domestic salty Fish team has opened source FlutterBoost technology solution, which is solving the existing problems.

Create the Flutter Project

• To use the Add-to-app integration of Flutter 1.12, we first need to create a Flutter Module.

• We then need to add a dependency on FlutterBoost to our project

flutter_boost: ^1.1213.
Copy the code

• Create two Flutter pages and initialize FlutterBoost in the startup method

@override
  void initState() {
    super.initState();
    FlutterBoost.singleton.registerPageBuilders({
      // Configure the page routing information
      "first_page": (context, params, _) => FirstPage(),
      "second_page": (context, params, _) => SecondPage()
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "FlutterBoostDemo",
      builder: FlutterBoost.init(),
      home: Container(),
    );
  }
Copy the code

• Package Android platform artifacts and adopt AAR integration

• The package is generated in the build/host/outputs/repo directory of the project

Integrated native project

• Add the following code to your native Android project app/build.gradle

repositories {
  maven {
    // Here is the directory where the products of Flutter were packaged. The actual path is local
    url '/Users/fengyuanjun/Desktop/test_module/build/host/outputs/repo'
  }
  maven {
    url 'http://download.flutter.io'}}Copy the code

dependencies {
  debugImplementation 'com. Example. Test_module: flutter_debug: 1.0'
  profileImplementation 'com. Example. Test_module: flutter_profile: 1.0'
  releaseImplementation 'com. Example. Test_module: flutter_release: 1.0'
}
Copy the code

• After synchronizing Gradle, configure FlutterBoost in your Application

class MyApp: Application() {override fun onCreate(a) {
        super.onCreate()
        initFlutterBoost();
    }

    private fun initFlutterBoost(a) {
        FlutterMain.startInitialization(this)
        val platform = FlutterBoost
            .ConfigBuilder(this.null)
            .isDebug(BuildConfig.DEBUG)
            .whenEngineStart(FlutterBoost.ConfigBuilder.ANY_ACTIVITY_CREATED)
            .renderMode(FlutterView.RenderMode.texture)
            .build()
        FlutterBoost.instance().init(platform)
    }
}
Copy the code

• We can start the Flutter page in this way

val intent = BoostFlutterActivity
      .withNewEngine()
      .url("first_page")
      .build(this)
startActivity(intent)
Copy the code

• In practical development, we would prefer to use different activities between different Flutter pages as carriers for specific interactions, avoiding the need to integrate a large number of native interactions with Flutter into one file. So we need to customize BoostFlutterActivity.

// This is an internal BoostFlutterActivity implementation
public String getContainerUrl() {
    return this.getIntent().hasExtra("url")?this.getIntent().getStringExtra("url") : "";
}
Copy the code

• By reading the source code of BoostFlutterActivity, we can see that the page Url is actually obtained by retrieving the Url parameter in the Intent object, so we only need to rewrite this method to achieve the requirements.

class FirstPage: BoostFlutterActivity() {
    // More functionality can be achieved by overwriting other methods or further encapsulation
    // Do only the most basic page jump function here
    override fun getContainerUrl(a): String {
        return "first_page"}}Copy the code

• Create a SecondActivity in the same way and add a startup entry to the home page. The final result is as follows

conclusion

The basic practice of the mixed development of Flutter 1.12 with Flutter Boost is over. We will bring you the interaction between Flutter and native and the development of real projects. Flutter officials and FlutterBoost also provide other integration methods and more advanced uses. Those who are interested can learn by themselves.

The resources

Flutter official: Flutter. Dev

FlutterBoost: github.com/alibaba/flu…

Flutter Chinese website: FlutterChina. Club

Nuggets Flutter community: juejin.cn/tag/Flutter