Skip to content

OpenContainer Transition Updates #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shihaohong merged 21 commits into from
Feb 5, 2020
Merged

OpenContainer Transition Updates #85

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
dc56e83
Reoder demo list to match guidelines
Feb 4, 2020
a82165e
Update capitalization and text to match spec
Feb 4, 2020
da554b2
(WIP) - implement fade and fadethrough options for OpenContainer tran…
Feb 4, 2020
9ea0588
Merge branch 'master' of github.com:flutter/packages into open-contai…
Feb 4, 2020
b27e346
Some polish to open_container.dart
Feb 4, 2020
050ddbb
WIP - Scaffolded out some unit tests for the fade case
Feb 4, 2020
9d260fa
Implement container open unit test
Feb 4, 2020
6c0ef06
Implement unit test for container close
Feb 4, 2020
5c0d358
Wordsmithing
Feb 4, 2020
6fbe0ca
Add docs and reorder scrim tween to where it was before
Feb 4, 2020
a7a3d97
Flutter format
Feb 4, 2020
8bcefbc
Fade colorTween update
Feb 4, 2020
0426a16
Fix color tween weights and related tests
Feb 5, 2020
d14cb60
Fix weights of remaining tweens
Feb 5, 2020
588d0c1
Flutter format
Feb 5, 2020
1a178e8
Switch order of fade tweens
Feb 5, 2020
f6e5543
Code review feedback
Feb 5, 2020
1075530
Add customization option for OpenContainer transition
shihaohong Feb 5, 2020
49d35b3
Flutter format
shihaohong Feb 5, 2020
0eec306
Code review feedback
shihaohong Feb 5, 2020
e37f271
Flutter format
shihaohong Feb 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 109 additions & 21 deletions packages/animations/lib/src/open_container.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,19 @@ typedef OpenContainerBuilder = Widget Function(
VoidCallback action,
);

/// The [OpenContainer] widget's fade transition type.
///
/// This determines the type of fade transition that the incoming and outgoing
/// contents will use.
enum ContainerTransitionType {
/// Fades the incoming element in over the outgoing element.
fade,

/// First fades the outgoing element out, and starts fading the incoming
/// element in once the outgoing element has completely faded out.
fadeThrough,
}

/// A container that grows to fill the screen to reveal new content when tapped.
///
/// While the container is closed, it shows the [Widget] returned by
Expand Down Expand Up @@ -57,6 +70,7 @@ class OpenContainer extends StatefulWidget {
@required this.openBuilder,
this.tappable = true,
this.transitionDuration = const Duration(milliseconds: 300),
this.transitionType = ContainerTransitionType.fade,
}) : assert(closedColor != null),
assert(openColor != null),
assert(closedElevation != null),
Expand All @@ -66,6 +80,7 @@ class OpenContainer extends StatefulWidget {
assert(closedBuilder != null),
assert(openBuilder != null),
assert(tappable != null),
assert(transitionType != null),
super(key: key);

/// Background color of the container while it is closed.
Expand Down Expand Up @@ -182,6 +197,12 @@ class OpenContainer extends StatefulWidget {
/// Defaults to 300ms.
final Duration transitionDuration;

/// The type of fade transition that the container will use for its
/// incoming and outgoing widgets.
///
/// Defaults to [ContainerTransitionType.fade].
final ContainerTransitionType transitionType;

@override
_OpenContainerState createState() => _OpenContainerState();
}
Expand Down Expand Up @@ -212,6 +233,7 @@ class _OpenContainerState extends State<OpenContainer> {
hideableKey: _hideableKey,
closedBuilderKey: _closedBuilderKey,
transitionDuration: widget.transitionDuration,
transitionType: widget.transitionType,
));
}

Expand Down Expand Up @@ -309,7 +331,7 @@ class _HideableState extends State<_Hideable> {

class _OpenContainerRoute extends ModalRoute<void> {
_OpenContainerRoute({
@required Color closedColor,
@required this.closedColor,
@required this.openColor,
@required double closedElevation,
@required this.openElevation,
Expand All @@ -320,6 +342,7 @@ class _OpenContainerRoute extends ModalRoute<void> {
@required this.hideableKey,
@required this.closedBuilderKey,
@required this.transitionDuration,
@required this.transitionType,
}) : assert(closedColor != null),
assert(openColor != null),
assert(closedElevation != null),
Expand All @@ -329,25 +352,17 @@ class _OpenContainerRoute extends ModalRoute<void> {
assert(closedBuilder != null),
assert(hideableKey != null),
assert(closedBuilderKey != null),
assert(transitionType != null),
_elevationTween = Tween<double>(
begin: closedElevation,
end: openElevation,

@goderbauer goderbauer Feb 4, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

(can't comment on the right line, but) do we need to update the color tween?

@shihaohong shihaohong Feb 5, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Done

),
_shapeTween = ShapeBorderTween(
begin: closedShape,
end: openShape,
),
_colorTween = _FlippableTweenSequence<Color>(<TweenSequenceItem<Color>>[
TweenSequenceItem<Color>(
tween: ColorTween(begin: closedColor, end: Colors.white),
weight: 4 / 12,
),
TweenSequenceItem<Color>(
tween: ColorTween(begin: Colors.white, end: openColor),
weight: 8 / 12,
),
]);
);

final Color closedColor;
final Color openColor;
final double openElevation;
final ShapeBorder openShape;
Expand All @@ -362,42 +377,70 @@ class _OpenContainerRoute extends ModalRoute<void> {

@override
final Duration transitionDuration;
final ContainerTransitionType transitionType;

final Tween<double> _elevationTween;
final ShapeBorderTween _shapeTween;
final _FlippableTweenSequence<Color> _colorTween;

final _FlippableTweenSequence<double> _closedOpacityTween =
// Fade transition opacity tweens
static final _FlippableTweenSequence<double> _fadeOpenOpacityTween =

@goderbauer goderbauer Feb 4, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

nit: can you switch open and close tween around so it has the same order ad the fadeThrough tweens?

@shihaohong shihaohong Feb 5, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Done

_FlippableTweenSequence<double>(<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: ConstantTween<double>(0.0),
weight: 1 / 5,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.0),
weight: 1 / 5,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(1.0),
weight: 3 / 5,
),
]);
static final _FlippableTweenSequence<double> _fadeClosedOpacityTween =
_FlippableTweenSequence<double>(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: ConstantTween<double>(1.0),
weight: 1,
),
],
);

// Fade through transition opacity tweens

@goderbauer goderbauer Feb 4, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can you update all the weights of the existing tweens?

@shihaohong shihaohong Feb 5, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Done

static final _FlippableTweenSequence<double> _fadeThroughClosedOpacityTween =
_FlippableTweenSequence<double>(<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.0, end: 0.0),
weight: 4 / 12,
weight: 1 / 5,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(0.0),
weight: 8 / 12,
weight: 4 / 5,
),
]);
final _FlippableTweenSequence<double> _openOpacityTween =
static final _FlippableTweenSequence<double> _fadeThroughOpenOpacityTween =
_FlippableTweenSequence<double>(<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: ConstantTween<double>(0.0),
weight: 4 / 12,
weight: 1 / 5,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.0),
weight: 8 / 12,
weight: 4 / 5,
),
]);

final TweenSequence<Color> _scrimFadeInTween = TweenSequence<Color>(

@goderbauer goderbauer Feb 5, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

(not part of your PR, but maybe you can fix it): These two could also be statics.

@shihaohong shihaohong Feb 5, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Done

<TweenSequenceItem<Color>>[
TweenSequenceItem<Color>(
tween: ColorTween(begin: Colors.transparent, end: Colors.black54),
weight: 4 / 12,
weight: 1 / 5,
),
TweenSequenceItem<Color>(
tween: ConstantTween<Color>(Colors.black54),
weight: 8 / 12,
weight: 4 / 5,
),
],
);
Expand Down Expand Up @@ -535,6 +578,51 @@ class _OpenContainerRoute extends ModalRoute<void> {
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
_FlippableTweenSequence<double> _closedOpacityTween;
_FlippableTweenSequence<double> _openOpacityTween;
_FlippableTweenSequence<Color> _colorTween;

switch (transitionType) {

@goderbauer goderbauer Feb 5, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

We could do this switching in the constructor and save the result in instance variables since the value of transitionType doesn't change for the duration of this object.

@shihaohong shihaohong Feb 5, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I moved colorTween, openOpacityTween and closedOpacityTween to be defined in the constructor.

case ContainerTransitionType.fade:
_closedOpacityTween = _fadeClosedOpacityTween;
_openOpacityTween = _fadeOpenOpacityTween;
_colorTween = _FlippableTweenSequence<Color>(
<TweenSequenceItem<Color>>[
TweenSequenceItem<Color>(
tween: ConstantTween<Color>(closedColor),
weight: 1 / 5,
),
TweenSequenceItem<Color>(
tween: ColorTween(begin: closedColor, end: openColor),
weight: 1 / 5,
),
TweenSequenceItem<Color>(
tween: ConstantTween<Color>(openColor),
weight: 3 / 5,
),
],
);
break;
case ContainerTransitionType.fadeThrough:
_closedOpacityTween = _fadeThroughClosedOpacityTween;
_openOpacityTween = _fadeThroughOpenOpacityTween;
_colorTween = _FlippableTweenSequence<Color>(
<TweenSequenceItem<Color>>[
TweenSequenceItem<Color>(
tween: ColorTween(begin: closedColor, end: Colors.white),
weight: 1 / 5,
),
TweenSequenceItem<Color>(
tween: ColorTween(begin: Colors.white, end: openColor),
weight: 4 / 5,
),
],
);
break;
}
assert(_closedOpacityTween != null);
assert(_openOpacityTween != null);

@goderbauer goderbauer Feb 5, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

add an assert for _colorTween?

@shihaohong shihaohong Feb 5, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Done


return Align(
alignment: Alignment.topLeft,
child: AnimatedBuilder(
Expand Down
Loading