From 2275190fe6fef23cc37cb30b17fafafabff3c8e2 Mon Sep 17 00:00:00 2001 From: Konstantin Dovnar Date: Thu, 8 Oct 2020 01:14:48 +0300 Subject: [PATCH] Open container: fade through color tween (#192) --- .../animations/lib/src/open_container.dart | 30 +++++++++++++++---- .../animations/test/open_container_test.dart | 6 ++-- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/animations/lib/src/open_container.dart b/packages/animations/lib/src/open_container.dart index 5274322934..9728475025 100644 --- a/packages/animations/lib/src/open_container.dart +++ b/packages/animations/lib/src/open_container.dart @@ -83,6 +83,7 @@ class OpenContainer extends StatefulWidget { Key key, this.closedColor = Colors.white, this.openColor = Colors.white, + this.middleColor, this.closedElevation = 1.0, this.openElevation = 4.0, this.closedShape = const RoundedRectangleBorder( @@ -112,9 +113,9 @@ class OpenContainer extends StatefulWidget { /// Background color of the container while it is closed. /// /// When the container is opened, it will first transition from this color - /// to [Colors.white] and then transition from there to [openColor] in one + /// to [middleColor] and then transition from there to [openColor] in one /// smooth animation. When the container is closed, it will transition back to - /// this color from [openColor] via [Colors.white]. + /// this color from [openColor] via [middleColor]. /// /// Defaults to [Colors.white]. /// @@ -126,9 +127,9 @@ class OpenContainer extends StatefulWidget { /// Background color of the container while it is open. /// /// When the container is closed, it will first transition from [closedColor] - /// to [Colors.white] and then transition from there to this color in one + /// to [middleColor] and then transition from there to this color in one /// smooth animation. When the container is closed, it will transition back to - /// [closedColor] from this color via [Colors.white]. + /// [closedColor] from this color via [middleColor]. /// /// Defaults to [Colors.white]. /// @@ -137,6 +138,16 @@ class OpenContainer extends StatefulWidget { /// * [Material.color], which is used to implement this property. final Color openColor; + /// The color to use for the background color during the transition + /// with [ContainerTransitionType.fadeThrough]. + /// + /// Defaults to [Theme]'s [ThemeData.canvasColor]. + /// + /// See also: + /// + /// * [Material.color], which is used to implement this property. + final Color middleColor; + /// Elevation of the container while it is closed. /// /// When the container is opened, it will transition from this elevation to @@ -264,12 +275,15 @@ class _OpenContainerState extends State> { final GlobalKey _closedBuilderKey = GlobalKey(); Future openContainer() async { + final Color middleColor = + widget.middleColor ?? Theme.of(context).canvasColor; final T data = await Navigator.of( context, rootNavigator: widget.useRootNavigator, ).push(_OpenContainerRoute( closedColor: widget.closedColor, openColor: widget.openColor, + middleColor: middleColor, closedElevation: widget.closedElevation, openElevation: widget.openElevation, closedShape: widget.closedShape, @@ -383,6 +397,7 @@ class _OpenContainerRoute extends ModalRoute { _OpenContainerRoute({ @required this.closedColor, @required this.openColor, + @required this.middleColor, @required double closedElevation, @required this.openElevation, @required ShapeBorder closedShape, @@ -417,6 +432,7 @@ class _OpenContainerRoute extends ModalRoute { transitionType: transitionType, closedColor: closedColor, openColor: openColor, + middleColor: middleColor, ), _closedOpacityTween = _getClosedOpacityTween(transitionType), _openOpacityTween = _getOpenOpacityTween(transitionType); @@ -425,6 +441,7 @@ class _OpenContainerRoute extends ModalRoute { @required ContainerTransitionType transitionType, @required Color closedColor, @required Color openColor, + @required Color middleColor, }) { switch (transitionType) { case ContainerTransitionType.fade: @@ -448,11 +465,11 @@ class _OpenContainerRoute extends ModalRoute { return _FlippableTweenSequence( >[ TweenSequenceItem( - tween: ColorTween(begin: closedColor, end: Colors.white), + tween: ColorTween(begin: closedColor, end: middleColor), weight: 1 / 5, ), TweenSequenceItem( - tween: ColorTween(begin: Colors.white, end: openColor), + tween: ColorTween(begin: middleColor, end: openColor), weight: 4 / 5, ), ], @@ -533,6 +550,7 @@ class _OpenContainerRoute extends ModalRoute { final Color closedColor; final Color openColor; + final Color middleColor; final double openElevation; final ShapeBorder openShape; final CloseContainerBuilder closedBuilder; diff --git a/packages/animations/test/open_container_test.dart b/packages/animations/test/open_container_test.dart index 77e9eb9e03..6d0e802190 100644 --- a/packages/animations/test/open_container_test.dart +++ b/packages/animations/test/open_container_test.dart @@ -364,6 +364,7 @@ void main() { child: OpenContainer( closedColor: Colors.green, openColor: Colors.blue, + middleColor: Colors.red, closedElevation: 4.0, openElevation: 8.0, closedShape: shape, @@ -461,7 +462,7 @@ void main() { biggerMaterial: dataMidpoint, tester: tester, ); - expect(dataMidpoint.material.color, isNot(dataMidFadeOut.material.color)); + expect(dataMidpoint.material.color, Colors.red); expect(_getOpacity(tester, 'Open'), moreOrLessEquals(0.0)); expect(_getOpacity(tester, 'Closed'), moreOrLessEquals(0.0)); @@ -538,6 +539,7 @@ void main() { child: OpenContainer( closedColor: Colors.green, openColor: Colors.blue, + middleColor: Colors.red, closedElevation: 4.0, openElevation: 8.0, closedShape: shape, @@ -635,7 +637,7 @@ void main() { biggerMaterial: dataMidFadeOut, tester: tester, ); - expect(dataMidpoint.material.color, isNot(dataMidFadeOut.material.color)); + expect(dataMidpoint.material.color, Colors.red); expect(_getOpacity(tester, 'Open'), moreOrLessEquals(0.0)); expect(_getOpacity(tester, 'Closed'), moreOrLessEquals(0.0));