[Animations] Add support for custom shadows to OpenContainer (#62475) by moepanda · Pull Request #11401 · flutter/packages

moepanda · 2026-03-31T11:17:22Z

Summary

This PR adds support for custom BoxShadow to the OpenContainer widget. This allows developers to specify closedShadows and openShadows to create more advanced and visually appealing transitions that go beyond the standard material elevation.

Fixes a legacy layout overflow issue in _ExampleSingleTile by replacing the fixed height with responsive constraints, ensuring the example remains stable across different system font sizes and shadow distributions.

Motivation

Currently, OpenContainer only supports a numeric elevation property, which limits modern UI designs requiring colored or multi-layered shadows. This PR also refactors the internal rendering hierarchy to move the shadow decoration outside the clipping surface, fixing a legacy issue where custom shadows were clipped by Material.

Issues

Fixesflutter/flutter#62475

Pre-Review Checklist

gemini-code-assist

Code Review

This pull request adds support for custom closedShadows and openShadows to the OpenContainer widget, enabling custom shadow animations during transitions. It also fixes a layout overflow in the example app by transitioning from a fixed height to minimum height constraints and includes new tests to verify shadow behavior. A review comment suggests conditionally wrapping the Material widget with DecoratedBox only when custom shadows are provided to avoid unnecessary widgets in the tree.

hannah-hyj

LGTM, thank you for fixing the layout overflow issue too!

moepanda · 2026-04-09T01:54:19Z

LGTM, thank you for fixing the layout overflow issue too!

Thank you! Glad to help.

stuartmorgan-g · 2026-04-14T18:34:27Z

From triage: @hannah-hyj Please add a second reviewer familiar with the package, so this can get the secondary review for landing.

QuncCccccc

Thank you for your contribution! Overall looks good! Just left one comment for adding an additional unit test.

QuncCccccc · 2026-04-14T22:27:25Z

+ final Widget material = Material(
+ clipBehavior: widget.clipBehavior,
+ color: widget.closedColor,
+ elevation: widget.closedShadows == null ? widget.closedElevation : 0.0,


Just for my learning, why do we need to set elevation to 0.0 when closedShadows is non-null.

We set elevation to 0.0 so the shadow comes from a single source when custom shadows are provided.
In this case the visual shadow is drawn by the wrapping DecoratedBox, so keeping Material.elevation would stack the framework shadow on top of the custom BoxShadows.
The same rule is applied in the fully-open state as well.

I see, it makes sense! Thanks for the explanation.

QuncCccccc · 2026-04-14T22:33:59Z

+ animationDuration: Duration.zero,
+ color: colorTween!.evaluate(animation),
+ shape: _shapeTween.evaluate(curvedAnimation),
+ elevation: _elevationTween.evaluate(curvedAnimation),


do we need to check currentShadows here like above?

This is intentional. The elevation tween already accounts for whether custom shadows are provided on either side, so mixed cases can smoothly transition between Material elevation and custom shadows. If we zeroed elevation whenever currentShadows is non-null, the transition would become abrupt in those mixed cases.

QuncCccccc · 2026-04-14T22:45:57Z

 expect(dataClosed.rect, dataTransitionDone.rect);
 });

+ testWidgets('Custom shadows work', (WidgetTester tester) async {


Can we add a test case for when one of the shadow properties is null and the other is provided? This would ensure the fallback to elevation behavior is verified and doesn't break in the future.

Good point, I added mixed null/non-null shadow test coverage for both directions to lock in the elevation fallback behavior during the transition.

QuncCccccc

LGTM. Thank you!

QuncCccccc · 2026-04-15T18:16:59Z

+ final Widget material = Material(
+ clipBehavior: widget.clipBehavior,
+ color: widget.closedColor,
+ elevation: widget.closedShadows == null ? widget.closedElevation : 0.0,


I see, it makes sense! Thanks for the explanation.

auto-submit · 2026-04-22T19:42:57Z

auto label is removed for flutter/packages/11401, Failed to merge flutter/packages/11401 with Pull request flutter/packages/11401 could not be merged: Required status check "ci.yaml validation" is expected..

Add coverage for null/non-null shadow combinations in OpenContainer. This verifies the elevation fallback behavior during mixed shadow transitions.

QuncCccccc · 2026-04-23T00:19:37Z

Seems there are some format issues that need to fix.

moepanda · 2026-04-23T03:21:54Z

Seems there are some format issues that need to fix.

PTAL

QuncCccccc

LGTM.

…r#185536) flutter/packages@4a2091d...8400f71 2026-04-23 14008334+moepanda@users.noreply.github.com [Animations] Add support for custom shadows to OpenContainer (flutter#62475) (flutter/packages#11401) 2026-04-23 engine-flutter-autoroll@skia.org Roll Flutter from 3d0e822 to 5e4f169 (24 revisions) (flutter/packages#11565) 2026-04-22 10687576+bparrishMines@users.noreply.github.com Revert "[webview_flutter_wkwebview] Tear down ProxyAPIRegistrar in `applicationWillTerminate`" (flutter/packages#11564) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages-flutter-autoroll Please CC flutter-ecosystem@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

…flutter#11401) ## Summary This PR adds support for custom `BoxShadow` to the `OpenContainer` widget. This allows developers to specify `closedShadows` and `openShadows` to create more advanced and visually appealing transitions that go beyond the standard material `elevation`. * Fixes a legacy layout overflow issue in `_ExampleSingleTile` by replacing the fixed height with responsive constraints, ensuring the example remains stable across different system font sizes and shadow distributions. ## Motivation Currently, `OpenContainer` only supports a numeric `elevation` property, which limits modern UI designs requiring colored or multi-layered shadows. This PR also refactors the internal rendering hierarchy to move the shadow decoration outside the clipping surface, fixing a legacy issue where custom shadows were clipped by `Material`. ## Issues Fixesflutter/flutter#62475 ## Pre-Review Checklist

github-actionsBot added p: animations triage-framework Should be looked at in framework triage labels Mar 31, 2026

gemini-code-assistBot reviewed Mar 31, 2026
View reviewed changes

Comment threadpackages/animations/lib/src/open_container.dart Outdated

stuartmorgan-g requested a review from hannah-hyj March 31, 2026 18:28

moepanda force-pushed the fix_open_container_shadow branch 4 times, most recently from 88d57a1 to f6d83d3Compare April 1, 2026 06:15

hannah-hyj approved these changes Apr 9, 2026
View reviewed changes

hannah-hyj requested a review from QuncCccccc April 14, 2026 22:35

QuncCccccc reviewed Apr 14, 2026
View reviewed changes

justinmc requested a review from QuncCccccc April 21, 2026 22:10

QuncCccccc approved these changes Apr 22, 2026
View reviewed changes

QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 22, 2026

auto-submitBot removed the autosubmit Merge PR when tree becomes green via auto submit App label Apr 22, 2026

moepanda added 2 commits April 22, 2026 15:34

[animations] Add support for custom shadows to OpenContainer (#62475)
2a25d5a

[animations] Add mixed shadow transition tests for OpenContainer
310d47c
Add coverage for null/non-null shadow combinations in OpenContainer. This verifies the elevation fallback behavior during mixed shadow transitions.

QuncCccccc force-pushed the fix_open_container_shadow branch from cc8dea2 to 310d47cCompare April 22, 2026 22:34

QuncCccccc added the CICD Run CI/CD label Apr 22, 2026

[animations] Fix formatting in open_container tests
9a61fa8

github-actionsBot removed the CICD Run CI/CD label Apr 23, 2026

QuncCccccc added the CICD Run CI/CD label Apr 23, 2026

QuncCccccc approved these changes Apr 23, 2026
View reviewed changes

QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 23, 2026

auto-submitBot merged commit 8400f71 into flutter:mainApr 23, 2026
82 checks passed

engine-flutter-autoroll mentioned this pull request Apr 24, 2026
Roll Packages from 4a2091d89f77 to 8400f71b056f (3 revisions) flutter/flutter#185536
Merged

Uh oh!

Conversation

moepanda commented Mar 31, 2026

Summary

Motivation

Issues

Pre-Review Checklist

Uh oh!

gemini-code-assistBot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

hannah-hyj left a comment

Choose a reason for hiding this comment

Uh oh!

moepanda commented Apr 9, 2026

Uh oh!

stuartmorgan-g commented Apr 14, 2026

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

QuncCcccccApr 14, 2026

Choose a reason for hiding this comment

Uh oh!

moepandaApr 15, 2026

Choose a reason for hiding this comment

Uh oh!

QuncCcccccApr 15, 2026

Choose a reason for hiding this comment

Uh oh!

QuncCcccccApr 14, 2026

Choose a reason for hiding this comment

Uh oh!

moepandaApr 15, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCcccccApr 14, 2026

Choose a reason for hiding this comment

Uh oh!

moepandaApr 15, 2026

Choose a reason for hiding this comment

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

QuncCcccccApr 15, 2026

Choose a reason for hiding this comment

Uh oh!

auto-submitBot commented Apr 22, 2026

Uh oh!

QuncCccccc commented Apr 23, 2026

Uh oh!

moepanda commented Apr 23, 2026

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

moepandaApr 15, 2026•
edited
Loading