Skip to content

marcossevilla/lazy_indexed_stack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0976b50 Â· Nov 22, 2024

History

23 Commits
Nov 22, 2024
Jun 3, 2022
Nov 22, 2024
Mar 1, 2023
Jul 19, 2023
Jun 2, 2022
Jun 1, 2022
Jul 19, 2023
Jun 2, 2022
Jun 13, 2022
Nov 22, 2024
Nov 22, 2024
Nov 22, 2024

Repository files navigation

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

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.