Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import 'package:flutter/material.dart';
class FadeIndexedStack extends StatefulWidget {
final int index;
final List<Widget> children;
final Duration duration;
const FadeIndexedStack({
Key key,
this.index,
this.children,
this.duration = const Duration(
milliseconds: 800,
),
}) : super(key: key);
@override
_FadeIndexedStackState createState() => _FadeIndexedStackState();
}
class _FadeIndexedStackState extends State<FadeIndexedStack>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void didUpdateWidget(FadeIndexedStack oldWidget) {
if (widget.index != oldWidget.index) {
_controller.forward(from: 0.0);
}
super.didUpdateWidget(oldWidget);
}
@override
void initState() {
_controller = AnimationController(vsync: this, duration: widget.duration);
_controller.forward();
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _controller,
child: IndexedStack(
index: widget.index,
children: widget.children,
),
);
}
}
@przemekbroda

This comment has been minimized.

Copy link

@przemekbroda przemekbroda commented Apr 13, 2020

Very useful. Thanks

@alifgiant

This comment has been minimized.

Copy link

@alifgiant alifgiant commented Jun 27, 2020

Hey, thanks a lot for this 👍

@XanderTerbl1

This comment has been minimized.

Copy link

@XanderTerbl1 XanderTerbl1 commented Sep 24, 2020

Thanks!

@hectorAguero

This comment has been minimized.

Copy link

@hectorAguero hectorAguero commented Oct 10, 2020

Sadly I have a rare glitch with this on iOS 14, Iphone X/XR/11/.., when I use a GoogleMap widget in one index, the google_map widget detect the OS padding a second after and refresh the widget with the google logo raise a little up, this doesn't happen to me with default IndexedStack.

@aliak00

This comment has been minimized.

Copy link

@aliak00 aliak00 commented Oct 15, 2020

This fades the selected stack index widget in, but doesn't fade the one that is going out, out. Is there a way to get that working?

@hetkpatel

This comment has been minimized.

Copy link

@hetkpatel hetkpatel commented Oct 31, 2020

This solution works really well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.