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 👍

@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.

@jagomf

This comment has been minimized.

Copy link

@jagomf jagomf commented Apr 20, 2021

Hey @diegoveloper, regarding null safety:

  • line 9: key should be nullable: Key? key
  • lines 10 and 11: both named arguments are required
  • line 23: I'd declare AnimationController _controller as late to avoid Dart warning not_initialized_non_nullable_instance_field.
@lucasfalcaoo

This comment has been minimized.

Copy link

@lucasfalcaoo lucasfalcaoo commented Jun 1, 2021

Great, man! Really great!

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