marcossevilla/lazy_indexed_stack

Lazy Indexed Stack 😴🥞

pub ci License: MIT style: very good analysis

A Flutter package that exposes an IndexedStack that can be lazily loaded.

IndexedStack is a widget that shows its children one at a time, preserving the state of all the children. But it renders all the children at once.

With LazyIndexedStack, you can load the children lazily, and only when they are needed. This comes in handy if you have a lot of children, and you don't want to load them all at once or if you have a child that loads content asynchronously.

Usage

The LazyIndexedStack API is the same as IndexedStack. A basic implementation requires two parameters:

• A List<Widget> of children that are going to be lazy loaded under the hood.
• An int index that indicates which child is going to be shown.

Example

https://raw.githubusercontent.com/marcossevilla/lazy_indexed_stack/main/art/flutter_lazy_indexed_stack.gif

class HomePage extends StatefulWidget {
  const HomePage({super.key, required this.title});

  final String title;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int index = 0;

  void changeIndex(int newIndex) => setState(() => index = newIndex);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: LazyIndexedStack(
              index: index,
              children: List.generate(3, (i) => Text('$i')),
            ),
          ),
          BottomNavigationBar(
            currentIndex: index,
            onTap: changeIndex,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.filter_1),
                label: '1',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.filter_2),
                label: '2',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.filter_3),
                label: '3',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Refer to the example to see the usage of LazyIndexedStack.