Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Revert "Reland "[Windows] Move to FlutterCompositor for rendering" #49461

Merged
merged 1 commit into from
Jan 2, 2024

Conversation

loic-sharma
Copy link
Member

@loic-sharma loic-sharma commented Jan 2, 2024

This reverts #49262 (00d7d23) as it regressed material_floating_search_bar's animation.

This revert was created manually due to merge conflicts.

Issue tracking bug: flutter/flutter#140828

Part of flutter/flutter#128904

Minimal repro of the broken animation...

Here's what the animation is supposed to look like:
good

Here's what the animation actually looks like: bad

Here is a minimal repro of the broken animation:

// The Windows compositor changes regresses the animation in
// the `material_floating_search_bar_2` package:
// 
// https://pub.dev/packages/material_floating_search_bar_2/versions/0.5.0
//
// Below is a minimal repro of the broken animation. This has two pieces:
//
//  1. The background fades to a grey color
//  2. A box is "revealed" using a custom clipper
//
// On framework commit b417fb828b332b0a4b0c80b742d86aa922de2649 this animation is broken on Windows.
// On framework commit 9c2a7560096223090d38bbd5b4c46760be396bc1 this animation works as expected on Windows.
//
// Good gif: https://publish-01.obsidian.md/access/b48ac8ca270cd9dac18c4a64d11b1c02/assets/2023-12-28-compositor_animation_regression_good.gif
// Bad gif: https://publish-01.obsidian.md/access/b48ac8ca270cd9dac18c4a64d11b1c02/assets/2023-12-28-compositor_animation_regression_bad.gif
import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Not using `MaterialApp` is necessary to reproduce:
    return Container(
      color: Colors.white,
      child: const Directionality(
        textDirection: TextDirection.ltr,
        child: FloatingSearchBar(),
      ),
    );

    // Switching to `MaterialApp` fixes the issue:
    // return const MaterialApp(
    //   home: Scaffold(
    //     body: FloatingSearchBar(),
    //   ),
    // );
  }
}

class FloatingSearchBar extends StatefulWidget {
  const FloatingSearchBar({super.key});

  @override
  FloatingSearchBarState createState() => FloatingSearchBarState();
}

class FloatingSearchBarState extends State<FloatingSearchBar> with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 2),
  );

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

  void _animate() {
    if (_controller.isDismissed || _controller.status == AnimationStatus.reverse) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, _) {
        return Stack(
          children: <Widget>[
            if (!_controller.isDismissed)
              FadeTransition(
                opacity: _controller,
                child: const SizedBox.expand(
                  child: DecoratedBox(
                    decoration: BoxDecoration(color: Colors.black26),
                  ),
                ),
              ),

            _buildSearchBar(),
          ],
        );
      },
    );
  }

  Widget _buildSearchBar() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        // This is where the search text input would go...
        GestureDetector(
          onTap: () => _animate(),
          child: Text(
            switch (_controller.status) {
              AnimationStatus.forward || AnimationStatus.completed => 'Click to close',
              AnimationStatus.reverse || AnimationStatus.dismissed => 'Click to open',
            },
            style: const TextStyle(color: Colors.black),
          ),
        ),
        
        // Below are where the search results would be. Clicking on the search
        // input above reveals the results below.

        // Removing this fixes the background's fade transition.
        ClipOval(
          clipper: _CircularRevealClipper(
            fraction: _controller.value,
          ),
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.white,
              // Removing this line fixes the background's fade transition.
              borderRadius: BorderRadius.circular(16.0),
            ),
            child: const Padding(
              padding: EdgeInsets.all(64.0),
              child: Text(
                'Hello world',
                style: TextStyle(color: Colors.black),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class _CircularRevealClipper extends CustomClipper<Rect> {
  const _CircularRevealClipper({required this.fraction});

  final double fraction;

  @override
  Rect getClip(Size size) {
    final double halfWidth = size.width * 0.5;
    final double maxRadius = sqrt(halfWidth * halfWidth + size.height * size.height);
    final double radius = lerpDouble(0.0, maxRadius, fraction) ?? 0;

    return Rect.fromCircle(
      center: Offset(halfWidth, 0),
      radius: radius,
    );
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    if (oldClipper is _CircularRevealClipper) {
      return oldClipper.fraction != fraction;
    }

    return true;
  }
}

Pre-launch Checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
  • I listed at least one issue that this PR fixes in the description above.
  • I added new tests to check the change I am making or feature I am adding, or the PR is test-exempt. See testing the engine for instructions on writing and running engine tests.
  • I updated/added relevant documentation (doc comments with ///).
  • I signed the CLA.
  • All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@loic-sharma loic-sharma marked this pull request as ready for review January 2, 2024 18:52
Copy link
Contributor

@yaakovschectman yaakovschectman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM with minor nit

@@ -327,8 +320,8 @@ bool FlutterWindow::OnBitmapSurfaceUpdated(const void* allocation,
bmi.bmiHeader.biBitCount = 32;
bmi.bmiHeader.biCompression = BI_RGB;
bmi.bmiHeader.biSizeImage = 0;
int ret = ::SetDIBitsToDevice(dc, 0, 0, row_bytes / 4, height, 0, 0, 0,
height, allocation, &bmi, DIB_RGB_COLORS);
int ret = SetDIBitsToDevice(dc, 0, 0, row_bytes / 4, height, 0, 0, 0, height,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a necessary part?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't strictly necessary but for bookkeeping purposes I'd prefer to fully revert #49262. This will make the reland easier to review as there'll be fewer changes between the original PR and the reland.

@loic-sharma loic-sharma added the autosubmit Merge PR when tree becomes green via auto submit App label Jan 2, 2024
@auto-submit auto-submit bot merged commit e95e123 into flutter:main Jan 2, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jan 3, 2024
auto-submit bot pushed a commit to flutter/flutter that referenced this pull request Jan 3, 2024
…140840)

flutter/engine@b5e79bd...e95e123

2024-01-02 737941+loic-sharma@users.noreply.github.com Revert "Reland "[Windows] Move to FlutterCompositor for rendering" (flutter/engine#49461)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-engine-flutter-autoroll
Please CC rmistry@google.com,zra@google.com on the revert to ensure that a human
is aware of the problem.

To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
No open projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

2 participants