Last active
October 28, 2023 20:21
-
-
Save diegoveloper/1cd23e79a31d0c18a67424f0cbdfd7ad to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | |
), | |
); | |
} | |
} |
Thanks for the code. Nicely done.
Thank you very much
very useful
This was very useful, thank you. I made some changes to support lazy loading and published it as a package, to make it easier to use. The package is called fade_indexed_stack.
class FadeIndexedStack extends StatefulWidget {
final int index;
final List<Widget> children;
final Duration duration;
const FadeIndexedStack({
required this.index,
required this.children,
this.duration = const Duration(
milliseconds: 100,
),
super.key,
});
@override
_FadeIndexedStackState createState() => _FadeIndexedStackState();
}
class _FadeIndexedStackState extends State<FadeIndexedStack> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void didUpdateWidget(FadeIndexedStack oldWidget) {
if (!mounted) return super.didUpdateWidget(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,
// required for errors not to occur during rapid switching between tabs
child: RepaintBoundary(
child: IndexedStack(
index: widget.index,
children: widget.children,
),
),
);
}
}
If rapid switching is not working well for you
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's an improved version with supporting all apis needed: