Flutter Indexed Stack Example

In this article, we are going to integrate flutter indexed stack widget to create custom navigation bar in mobile application. We already implemented cupertino segmented control for both android & iOS platforms.

Indexed Stack widget is used to display one component at a one time using stack position. We need to add all our components in this indexed stack widget. Whenever we will change index value of indexed stack widget, component of that position will be displayed.

Indexed Stack Widget has many properties. Using index property, we can display different components in single screen. We can add multiple child components in indexed stack widget using children property. We can also set alignment of child components in stack widget using alignment property.

Create Navigation Buttons

Widget navButtonsWidgets() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.orangeAccent),
child: Text(
‘Man U’,
style: TextStyle(fontSize: 22, color: Colors.white),
),
onPressed: () {
setState(() {
stackPos = 0;
});
},
),
ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.redAccent),
child: Text(
‘Man City’,
style: TextStyle(fontSize: 22, color: Colors.white),
),
onPressed: () {
setState(() {
stackPos = 1;
});
},
),
ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.deepOrangeAccent),
child: Text(
‘Spurs’,
style: TextStyle(fontSize: 22, color: Colors.white),
),
onPressed: () {
setState(() {
stackPos = 2;
});
},
),
],
);
}

Create Flutter Indexed Stack UI

Widget stackedUIWidgets() {
return Expanded(
child: IndexedStack(
index: stackPos,
children: <Widget>[
Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
‘Manchester United’,
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.orangeAccent),
),
SizedBox(height: 25),
Text(
‘Cristiano Ronaldo’,
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
)
],
))),
Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
‘Manchester City’,
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.redAccent),
),
SizedBox(height: 25),
Text(
‘Kevin De Bruyne’,
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
)
]))),
Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
‘Tottenham Hotspur’,
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.deepOrangeAccent),
),
SizedBox(height: 25),
Text(
‘Harry Kane’,
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
)
]))),
],
),
);
}

Integrate Widgets

int stackPos = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Indexed Stack Sample’)),
body: Container(
child: Column(
children: <Widget>[
stackedUIWidgets(),
navButtonsWidgets(),
SizedBox(height: 35)
],
),
),
);
}