Skip to content

[android] FadeTransitions do not work with platform views using hybrid composition #93757

@WasserEsser

Description

@WasserEsser

FadeTransitions do not work on platform views that use hybrid composition. The example below uses a Google Map but this also applies to other platform views (like webviews).

Expected results: The Flutter logo and platform view are both fading, like when hybrid composition is disabled.

Actual results: The Flutter logo is fading while the platform view (Google Map in this case) is not.

Code sample

Example taken from the Flutter documentation for FadeTransition, with an added GoogleMap.

/// Flutter code sample for FadeTransition

// The following code implements the [FadeTransition] using
// the Flutter logo:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  AndroidGoogleMapsFlutter.useAndroidViewSurface = true;
  runApp(const MyApp());
}

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition(
        opacity: _animation,
        child: Padding(
          padding: EdgeInsets.all(8),
          child: SafeArea(
            child: Column(
              children: [
                FlutterLogo(
                  size: 128,
                ),
                Expanded(
                  child: GoogleMap(
                    initialCameraPosition: CameraPosition(
                      target: LatLng(37.3861, 122.0839),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
`flutter doctor -v` output
[✓] Flutter (Channel stable, 2.5.3, on Ubuntu 21.10 5.4.72-microsoft-standard-WSL2, locale en_US.UTF-8)
    • Flutter version 2.5.3 at /home/developer/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (5 weeks ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /home/developer/android
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /home/developer/android
    • ANDROID_SDK_ROOT = /home/developer/android
    • Java binary at: /usr/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_302-8u302-b08-0ubuntu2-b08)
    • All Android licenses accepted.

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (1 available)
    • IN2023 (mobile) • 192.168.178.72:43119 • android-arm64 • Android 11 (API 30)

! Doctor found issues in 2 categories.
Video demonstration
hybrid_composition.mp4
no_hybrid_composition.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: animationAnimation APIsa: platform-viewsEmbedding Android/iOS views in Flutter appsengineflutter/engine related. See also e: labels.found in release: 2.5Found to occur in 2.5found in release: 2.6Found to occur in 2.6has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-androidAndroid applications specificallyteam-androidOwned by Android platform teamtriaged-androidTriaged by Android platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions