mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
8be4835c7c
This reverts https://github.com/flutter/engine/pull/49262 (f3381e1080) as it regressed [`material_floating_search_bar`](https://pub.dev/packages/material_floating_search_bar_2)'s animation.
This revert was created manually due to merge conflicts.
Issue tracking bug: https://github.com/flutter/flutter/issues/140828
Part of https://github.com/flutter/flutter/issues/128904
<details>
<summary>Minimal repro of the broken animation...</summary>
Here's what the animation is supposed to look like:
Here's what the animation actually looks like: 
Here is a minimal repro of the broken animation:
```dart
// 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;
}
}
```
</details>
[C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
Flutter Engine
Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
The Flutter Engine is a portable runtime for hosting Flutter applications. It implements Flutter's core libraries, including animation and graphics, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain. Most developers will interact with Flutter via the Flutter Framework, which provides a modern, reactive framework, and a rich set of platform, layout and foundation widgets.
If you want to run/contribute to Flutter Web engine, more tooling can be found at felt. This is a tool written to make web engine development experience easy.
If you are new to Flutter, then you will find more general information on the Flutter project, including tutorials and samples, on our Web site at Flutter.dev. For specific information about Flutter's APIs, consider our API reference which can be found at the docs.flutter.dev.
Flutter is a fully open source project, and we welcome contributions. Information on how to get started can be found at our contributor guide.