Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 22:09:06 +00:00
Code Issues Releases Wiki Activity

use AnimatedSwitcher instead of AnimatedCrossFade

Browse Source
This commit is contained in:
John Ryan
2019-07-12 16:32:12 -07:00
parent bda1f83ca2
commit e112e02549
1 changed files with 24 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
animations/lib/src/misc/expand_card.dart
View File

@@ -20,13 +20,13 @@ class ExpandCard extends StatefulWidget {
class _ExpandCardState extends State<ExpandCard> class _ExpandCardState extends State<ExpandCard>
with SingleTickerProviderStateMixin { with SingleTickerProviderStateMixin {
static const Duration duration = Duration(milliseconds: 300); static const Duration duration = Duration(milliseconds: 300);
bool expanded = false; bool selected = false;
double get size => expanded ? 200 : 100; double get size => selected ? 200 : 100;
void toggleExpanded() { void toggleExpanded() {
setState(() { setState(() {
expanded = !expanded; selected = !selected;
}); });
} }
@@ -40,35 +40,30 @@ class _ExpandCardState extends State<ExpandCard>
duration: duration, duration: duration,
width: size, width: size,
height: size, height: size,
child: AnimatedCrossFade( child: AnimatedSwitcher(
duration: duration, duration: duration,
crossFadeState: expanded layoutBuilder:
? CrossFadeState.showSecond (Widget currentChild, List<Widget> previousChildren) {
: CrossFadeState.showFirst, List<Widget> children = previousChildren;
// Use Positioned.fill() to pass the constraints to its children. if (currentChild != null)
// This allows the Images to use BoxFit.cover to cover the correct children = children.toList()..add(currentChild);
// size
layoutBuilder: (Widget topChild, Key topChildKey,
Widget bottomChild, Key bottomChildKey) {
return Stack( return Stack(
children: <Widget>[ children: [
Positioned.fill( // Use Positioned.fill so that the child image receives the
key: bottomChildKey, // constraints of the AnimatedContainer
child: bottomChild, ...children.map((c) => Positioned.fill(child: c)),
),
Positioned.fill(
key: topChildKey,
child: topChild,
),
], ],
); );
}, },
firstChild: Image.asset( child: selected
? Image.asset(
'assets/cat.jpg', 'assets/cat.jpg',
key: ValueKey('cat'),
fit: BoxFit.cover, fit: BoxFit.cover,
), )
secondChild: Image.asset( : Image.asset(
'assets/wolf.jpg', 'assets/wolf.jpg',
key: ValueKey('wolf'),
fit: BoxFit.cover, fit: BoxFit.cover,
), ),
), ),