animated indexed stack

fade_indexed_stack.dart

import 'package:fluent_ui/fluent_ui.dart';
// import 'package:flutter/material.dart'; // uncomment if you use material

class AnimatedIndexedStack extends StatefulWidget {
  final int index;
  final List<Widget> children;
  final Duration duration;
  final Widget Function(Widget, AnimationController) transitionBuilder;

  const AnimatedIndexedStack({
    Key? key,
    required this.index,
    required this.children,
    required this.transitionBuilder,
    this.duration = const Duration(
      milliseconds: 800,
    ),
  }) : super(key: key);

  @override
  State<AnimatedIndexedStack> createState() => _AnimatedIndexedStackState();
}

class _AnimatedIndexedStackState extends State<AnimatedIndexedStack>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void didUpdateWidget(AnimatedIndexedStack 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 widget.transitionBuilder(
      IndexedStack(
        index: widget.index,
        children: widget.children,
      ),
      _controller,
    );
  }
}