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

@Maruf-S

This comment has been minimized.

Copy link

@Maruf-S Maruf-S commented Dec 17, 2020

Thankyou sir, i now will be stealing this😁

@kurtsk

This comment has been minimized.

Copy link

@kurtsk kurtsk commented Dec 23, 2020

🤘

@XavierSoh

This comment has been minimized.

Copy link

@XavierSoh XavierSoh commented Jan 29, 2021

Works fine . Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment