use AnimatedSwitcher instead of AnimatedCrossFade

pull/118/head
John Ryan 6 years ago
parent bda1f83ca2
commit e112e02549

@ -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,37 +40,32 @@ 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
'assets/cat.jpg', ? Image.asset(
fit: BoxFit.cover, 'assets/cat.jpg',
), key: ValueKey('cat'),
secondChild: Image.asset( fit: BoxFit.cover,
'assets/wolf.jpg', )
fit: BoxFit.cover, : Image.asset(
), 'assets/wolf.jpg',
key: ValueKey('wolf'),
fit: BoxFit.cover,
),
), ),
), ),
), ),

Loading…
Cancel
Save