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.
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.
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
.