Add and default to Hybrid composition on Android (flutter-mapbox-gl#916)

example/android/app/src/main/AndroidManifest.xml

@@ -11,6 +11,7 @@
 
         <activity
             android:name=".MainActivity"
+            android:exported="true"
             android:launchMode="singleTop"
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"

example/lib/generated_plugin_registrant.dart

@@ -5,13 +5,15 @@
 // ignore_for_file: directives_ordering
 // ignore_for_file: lines_longer_than_80_chars
 
+import 'package:device_info_plus_web/device_info_plus_web.dart';
 import 'package:location_web/location_web.dart';
 import 'package:mapbox_gl_web/mapbox_gl_web.dart';
 
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
 
 // ignore: public_member_api_docs
 void registerPlugins(Registrar registrar) {
+  DeviceInfoPlusPlugin.registerWith(registrar);
   LocationWebPlugin.registerWith(registrar);
   MapboxMapPlugin.registerWith(registrar);
   registrar.registerMessageHandler();

example/lib/main.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:io';
+
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:location/location.dart';
@@ -10,6 +12,8 @@ import 'package:mapbox_gl_example/full_map.dart';
 import 'package:mapbox_gl_example/offline_regions.dart';
 import 'package:mapbox_gl_example/place_batch.dart';
 import 'package:mapbox_gl_example/layer.dart';
+import 'package:mapbox_gl_example/sources.dart';
+import 'package:device_info_plus/device_info_plus.dart';
 
 import 'animate_camera.dart';
 import 'annotation_order_maps.dart';
@@ -25,6 +29,7 @@ import 'place_source.dart';
 import 'place_symbol.dart';
 import 'place_fill.dart';
 import 'scrolling_map.dart';
+import 'package:mapbox_gl/mapbox_gl.dart';
 
 final List<ExamplePage> _allPages = <ExamplePage>[
   MapUiPage(),
@@ -46,7 +51,7 @@ final List<ExamplePage> _allPages = <ExamplePage>[
   ClickAnnotationPage()
 ];
 
-class MapsDemo extends StatelessWidget {
+class MapsDemo extends StatefulWidget {
   // FIXME: You need to pass in your access token via the command line argument
   // --dart-define=ACCESS_TOKEN=ADD_YOUR_TOKEN_HERE
   // It is also possible to pass it in while running the app via an IDE by
@@ -56,6 +61,31 @@ class MapsDemo extends StatelessWidget {
   // in the following line with your access token directly.
   static const String ACCESS_TOKEN = String.fromEnvironment("ACCESS_TOKEN");
 
+  @override
+  State<MapsDemo> createState() => _MapsDemoState();
+}
+
+class _MapsDemoState extends State<MapsDemo> {
+  @override
+  void initState() {
+    initHybridComposition();
+    super.initState();
+  }
+
+  /// Determine the android version of the phone and turn off HybridComposition
+  /// on older sdk versions to improve performance for these
+  Future<void> initHybridComposition() async {
+    if (!kIsWeb && Platform.isAndroid) {
+      final androidInfo = await DeviceInfoPlugin().androidInfo;
+      final sdkVersion = androidInfo.version.sdkInt;
+      if (sdkVersion != null && sdkVersion >= 29) {
+        MapboxMap.useHybridComposition = true;
+      } else {
+        MapboxMap.useHybridComposition = false;
+      }
+    }
+  }
+
   void _pushPage(BuildContext context, ExamplePage page) async {
     if (!kIsWeb) {
       final location = Location();
@@ -75,7 +105,8 @@ class MapsDemo extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('MapboxMaps examples')),
-      body: ACCESS_TOKEN.isEmpty || ACCESS_TOKEN.contains("YOUR_TOKEN")
+      body: MapsDemo.ACCESS_TOKEN.isEmpty ||
+              MapsDemo.ACCESS_TOKEN.contains("YOUR_TOKEN")
           ? buildAccessTokenWarning()
           : ListView.separated(
               itemCount: _allPages.length,

example/pubspec.yaml

@@ -17,6 +17,7 @@ dependencies:
   path_provider: ^2.0.0
   http: ^0.13.0
   collection: ^1.0.0
+  device_info_plus: ^3.2.2
 
 dependency_overrides:
   mapbox_gl_platform_interface:

lib/src/mapbox_map.dart

@@ -203,6 +203,14 @@ class MapboxMap extends StatefulWidget {
   /// * All fade/transition animations have completed
   final OnMapIdleCallback? onMapIdle;
 
+  /// Set `MapboxMap.useHybridComposition` to `false` in order use Virtual-Display
+  /// (better for Android 9 and below but may result in errors on Android 12)
+  /// or leave it `true` (default) to use Hybrid composition (Slower on Android 9 and below).
+  static bool get useHybridComposition =>
+      MethodChannelMapboxGl.useHybridComposition;
+  static set useHybridComposition(bool useHybridComposition) =>
+      MethodChannelMapboxGl.useHybridComposition = useHybridComposition;
+
   @override
   State createState() => _MapboxMapState();
 }

mapbox_gl_platform_interface/lib/mapbox_gl_platform_interface.dart

@@ -7,6 +7,7 @@ import 'dart:typed_data';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:meta/meta.dart' show visibleForTesting;
 

mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart

@@ -2,6 +2,7 @@ part of mapbox_gl_platform_interface;
 
 class MethodChannelMapboxGl extends MapboxGlPlatform {
   late MethodChannel _channel;
+  static bool useHybridComposition = true;
 
   Future<dynamic> _handleMethodCall(MethodCall call) async {
     switch (call.method) {
@@ -133,13 +134,50 @@ class MethodChannelMapboxGl extends MapboxGlPlatform {
       OnPlatformViewCreatedCallback onPlatformViewCreated,
       Set<Factory<OneSequenceGestureRecognizer>>? gestureRecognizers) {
     if (defaultTargetPlatform == TargetPlatform.android) {
-      return AndroidView(
-        viewType: 'plugins.flutter.io/mapbox_gl',
-        onPlatformViewCreated: onPlatformViewCreated,
-        gestureRecognizers: gestureRecognizers,
-        creationParams: creationParams,
-        creationParamsCodec: const StandardMessageCodec(),
-      );
+      if (useHybridComposition) {
+        return PlatformViewLink(
+          viewType: 'plugins.flutter.io/mapbox_gl',
+          surfaceFactory: (
+            BuildContext context,
+            PlatformViewController controller,
+          ) {
+            return AndroidViewSurface(
+              controller: controller as AndroidViewController,
+              gestureRecognizers: gestureRecognizers ??
+                  const <Factory<OneSequenceGestureRecognizer>>{},
+              hitTestBehavior: PlatformViewHitTestBehavior.opaque,
+            );
+          },
+          onCreatePlatformView: (PlatformViewCreationParams params) {
+            final SurfaceAndroidViewController controller =
+                PlatformViewsService.initSurfaceAndroidView(
+              id: params.id,
+              viewType: 'plugins.flutter.io/mapbox_gl',
+              layoutDirection: TextDirection.ltr,
+              creationParams: creationParams,
+              creationParamsCodec: const StandardMessageCodec(),
+              onFocus: () => params.onFocusChanged(true),
+            );
+            controller.addOnPlatformViewCreatedListener(
+              params.onPlatformViewCreated,
+            );
+            controller.addOnPlatformViewCreatedListener(
+              onPlatformViewCreated,
+            );
+
+            controller.create();
+            return controller;
+          },
+        );
+      } else {
+        return AndroidView(
+          viewType: 'plugins.flutter.io/mapbox_gl',
+          onPlatformViewCreated: onPlatformViewCreated,
+          gestureRecognizers: gestureRecognizers,
+          creationParams: creationParams,
+          creationParamsCodec: const StandardMessageCodec(),
+        );
+      }
     } else if (defaultTargetPlatform == TargetPlatform.iOS) {
       return UiKitView(
         viewType: 'plugins.flutter.io/mapbox_gl',

mapbox_gl_web/pubspec.yaml

@@ -20,7 +20,7 @@ dependencies:
     git:
       url: https://github.com/MobileSoftHK/maps.git
       path: mapbox_gl_platform_interface
-      ref: dogtrace/release-0.14.0
+      ref: dogtrace/release-0.14.0-hybrid-composition
   mapbox_gl_dart: ^0.2.0-nullsafety
   image: ^3.0.0
 

pubspec.lock

@@ -14,7 +14,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   collection:
     dependency: transitive
     description:
@@ -66,14 +66,21 @@ packages:
       path: mapbox_gl_platform_interface
       relative: true
     source: path
-    version: "0.12.0"
+    version: "0.14.0"
   mapbox_gl_web:
     dependency: "direct main"
     description:
       path: mapbox_gl_web
       relative: true
     source: path
-    version: "0.12.0"
+    version: "0.14.0"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
@@ -113,7 +120,7 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
   xml:
     dependency: transitive
     description:
@@ -122,5 +129,5 @@ packages:
     source: hosted
     version: "5.1.0"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.14.0 <3.0.0"
   flutter: ">=2.0.0"

pubspec.yaml

@@ -10,13 +10,13 @@ dependencies:
     git:
       url: https://github.com/MobileSoftHK/maps.git
       path: mapbox_gl_platform_interface
-      ref: dogtrace/release-0.14.0
+      ref: dogtrace/release-0.14.0-hybrid-composition
 
   mapbox_gl_web:
     git:
       url: https://github.com/MobileSoftHK/maps.git
       path: mapbox_gl_web
-      ref: dogtrace/release-0.14.0
+      ref: dogtrace/release-0.14.0-hybrid-composition
 
 dependency_overrides:
   mapbox_gl_platform_interface: