I am struggling with implementation of bottom navigation bar. Specifically, I am trying to place 'index' with the body as in all examples that I found, but body element already has Responsive screen inside. The problem is: even though I have navigation bar displayed, it doesn't redirect to the specific route and doesn't highlight selected navigation item.
Could you please help me to fix it?
The sequence of my code looks following way:
class LevelSelectionScreen extends StatefulWidget {
const LevelSelectionScreen({super.key});
@override
_LevelSelectionScreenState createState() =>
_LevelSelectionScreenState();
}
class _LevelSelectionScreenState extends State<LevelSelectionScreen> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
final playerProgress = context.watch<PlayerProgress>();
int _selectedIndex = 0;
final pages = [
const MainMenuScreen(),
const AvailabilityScreen(),
const SettingsScreen(),
];
return Scaffold(
extendBody: true,
bottomNavigationBar: NavigationBar(
height: 60,
selectedIndex: _selectedIndex,
elevation: 100,
onDestinationSelected: _onItemTapped,
destinations: [
NavigationDestination(
icon: Icon(Icons.home),
selectedIcon: Icon(Icons.home),
label: 'home',
),
NavigationDestination(
icon: Icon(Icons.book),
selectedIcon: Icon(Icons.book),
label: 'learn',
),
NavigationDestination(
icon: Icon(Icons.gamepad),
selectedIcon: Icon(Icons.gamepad),
label: 'play',
),
NavigationDestination(
icon: Icon(Icons.person),
selectedIcon: Icon(Icons.person),
label: 'profile',
),
]),
backgroundColor: Color(0XFFFEF4DF),
body:
ResponsiveScreen(
squarishMainArea: Padding(
child: Column(
children: [
Row(
children: [
Align(
InkResponse(
onTap:
child: Padding(
padding:
child: CircleAvatar(
child: Icon(
Icons.person,
),
),
),
),
),
Align(
child: InkResponse(
onTap:
child: Padding(
padding:
child: CircleAvatar(
radius: 20,
child: Icon(
Icons.home,
),
),
),
),
),
],
),
Padding(
child: Center(
),
Expanded(
child: ListView(
children: [
for (final level in gameLevels)
Padding(
child: ListTile(
)
rectangularMenuArea: SizedBox()));
}
}
