Change Container widget background color on press - flutter

Question

I am trying to change the background color of my container widget inside the Expanded when a button is pressed in BottomNavigationBar.
I am using a list of color and a variable index to traverse the list front and back.
Even though I used setState(() {}), the color is not changing.
h(double x) and w(double x) are the methods that return the height or width of the screen times x using a media query.
Here is my code: the list:
List<Color> col = [Colors.grey, Colors.red, Colors.pink];
int index = 0;
BottomNavigationBar:
bottomNavigationBar: BottomAppBar(
child: Container(
color: Colors.orange,
height: h(0.07),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () {
if (index == 0) {
} else {
setState(() {
index--;
});
}
},
),
Icon(
Icons.color_lens_rounded,
color: Colors.white,
),
IconButton(
icon: Icon(Icons.arrow_forward_ios),
color: Colors.white,
onPressed: () {
if (index == col.length - 1) {
} else {
setState(() {
index++;
});
}
},
),
],
),
),
),
Widget whose color has to be changed
Expanded(
child: Container(
color: col[index],
child: Column(
children: [],
),
),
)

Answer 1

run this code, then hope so you can modify as you want
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}