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
Copy link

przemekbroda commented Apr 13, 2020

Very useful. Thanks

@alifgiant
Copy link

alifgiant commented Jun 27, 2020

Hey, thanks a lot for this 👍

@hectorAguero
Copy link

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
Copy link

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
Copy link

hetkpatel commented Oct 31, 2020

This solution works really well

@Maruf-S
Copy link

Maruf-S commented Dec 17, 2020

Thankyou sir, i now will be stealing this😁

@kurtsk
Copy link

kurtsk commented Dec 23, 2020

🤘

@XavierSoh
Copy link

XavierSoh commented Jan 29, 2021

Works fine . Thank you.

@jagomf
Copy link

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
Copy link

lucasfalcaoo commented Jun 1, 2021

Great, man! Really great!

@sumeetkumar1
Copy link

sumeetkumar1 commented Sep 24, 2021

Extremely Help full thank you. I will be modifying it for my needs

@MinhCuongIT
Copy link

MinhCuongIT commented Oct 8, 2021

Thanks a lot!

@Eng-MFQ
Copy link

Eng-MFQ commented Dec 31, 2021

Thanks bro it very useful and smart

@bakhbk
Copy link

bakhbk commented Jul 19, 2022

Thanks a lot!

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