flutter_lazy_indexed_stack

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that extends the built-in IndexedStack to support lazy loading of its children. It ensures that only the currently visible widget is built and rendered, improving performance for large stacks with expensive widgets. Ideal for scenarios where memory efficiency and on-demand rendering are crucial. The package maintains the same API as IndexedStack but adds lazy initialization, making it seamless to integrate into existing projects.

Use cases

Large tabbed interfaces
Memory-efficient navigation
Dynamic content switching
On-demand widget rendering
Complex UIs with heavy components

Key features

Lazy loading of stack children
Same API as IndexedStack
Improved performance
Reduced memory usage
Seamless integration

Suitable for

Developers optimizing UI performance
Apps with many tabs or screens
Projects using IndexedStack with heavy widgets
Pagination-heavy applications
Highly interactive dashboards

Considerations

Not suitable for immediate child rendering needs
Limited to stack-based layouts
May require careful state management
Best used with stable index values
Does not support animated transitions by default

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Lazy Indexed Stack 😴🥞

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

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',
              ),
            ],
          ),
        ],
      ),
    );
  }
}