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',
),
],
),
],
),
);
}
}
Refer to the example to see the usage of LazyIndexedStack.
