[Flutter] How to Replace Screens on App Bar Item Click in Flutter?

1. main.dart


import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'home_main_screen.dart'; // Import your main screen file

void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Screen Switcher',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeMainScreen(),
);
}
}

2. home_main_screen.dart


import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'custom_app_bar.dart'; // Import your custom app bar file
import 'result_screen.dart';
import 'download_reports_screen.dart';
import 'job_roles_screen.dart';
import 'reminder_screen.dart';
import 'help_screen.dart';

final selectedIndexProvider = StateProvider<int>((ref) => 0);

class HomeMainScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedIndex = ref.watch(selectedIndexProvider);

final List<Widget> screens = [
_buildCompleteBody(), // The main content screen
ResultScreen(),
DownloadReportsScreen(),
JobRolesScreen(),
ReminderScreen(),
HelpScreen(),
];

return Scaffold(
appBar: CustomAppBar(),
body: screens[selectedIndex], // Show the selected screen
);
}

Widget _buildCompleteBody() {
return Center(
child: Text(
'Dashboard Content Here',
style: TextStyle(fontSize: 24),
),
);
}
}

3. custom_app_bar.dart


import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'home_main_screen.dart'; // Import your HomeMainScreen file

class CustomAppBar extends ConsumerWidget implements PreferredSizeWidget {
final List<String> userNavBarItems = [
'Dashboard',
'Results',
'Download Reports',
'Job Roles',
'Reminders',
'Help',
];

@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);

@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedIndex = ref.watch(selectedIndexProvider);

return AppBar(
title: Row(
children: [
Text('My App', style: TextStyle(fontSize: 24)),
Spacer(),
...List.generate(userNavBarItems.length, (index) {
return InkWell(
onTap: () {
ref.read(selectedIndexProvider.notifier).state = index; // Update selected index
},
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 12.0),
child: Column(
children: [
Text(
userNavBarItems[index],
style: TextStyle(
fontSize: 16,
color: index == selectedIndex ? Colors.blue : Colors.black,
),
),
if (index == selectedIndex)
Container(
margin: const EdgeInsets.only(top: 4.0),
height: 2.0,
width: 40.0,
color: Colors.blue,
),
],
),
),
);
}),
],
),
);
}
}

4. Example Screens (e.g., result_screen.dart, download_reports_screen.dart)


You will need to create separate files for each screen that you want to display. Here are examples for the ResultScreen and DownloadReportsScreen.

result_screen.dart


import 'package:flutter/material.dart';

class ResultScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Results Screen',
style: TextStyle(fontSize: 24),
),
);
}
}

download_reports_screen.dart


import 'package:flutter/material.dart';

class DownloadReportsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Download Reports Screen',
style: TextStyle(fontSize: 24),
),
);
}
}

5. Additional Screens


Similarly, create other screens like JobRolesScreen, ReminderScreen, and HelpScreen following the same structure as above.

Explanation

• State Management: We're using StateProvider from flutter_riverpod to hold the index of the currently selected screen.
• App Bar: The CustomAppBar updates the selected index when an item is clicked, causing the body of HomeMainScreen to rebuild with the corresponding screen.
• Screens: Each screen simply displays its name for clarity. You can replace the content with your actual implementations.

Continue reading...