fade_indexed_stack

An IndexedStack with FadeTransition and lazy loading.

Inspirations

• diegoveloper for the gist on how to apply FadeTransition to a IndexedStack.
• okaryo for the lazy_load_indexed_stack package.

Usage

You can use FadeIndexedStack like you would use an IndexedStack.

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FadeIndexedStack(
        index: _currentIndex,
        children: [
          FirstPage(),
          SecondPage(),
          ThirdPage(),
        ],
      ),
      bottomNavigationBar: NavigationBar(
        destinations: [
          NavigationDestination(),
          NavigationDestination(),
          NavigationDestination(),
        ],
        selectedIndex: _currentIndex,
        onDestinationSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

For more details, check out the example file.