Header Screen
CommonHeader.dart
Screen Description:
Code Descripion:
CommonHeader Class
The `CommonHeader` class is a reusable Flutter widget that represents the header section of the application’s app bar. It is designed to display a centered logo or image along with a popup menu that provides navigation options and actions for the user.
# Constructor
“`dart
const CommonHeader({super.key});
“`
- – The `CommonHeader` class constructor takes an optional `key` parameter but does not use it in the widget.
# `build` Method
“`dart
@override
Widget build(BuildContext context) {
// … (Widget tree)
}
“`
- The `build` method constructs the UI for the common app bar header.
# App Bar
“`dart
AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Replace with your app logo
Padding(
padding: const EdgeInsets.all(40.0), // Adjust the padding as needed
child: Align(
alignment: Alignment.topCenter,
child: Image.asset(‘assets/logo.png’, width: 100, height: 200),
),
),
],
),
actions: [
// … (PopupMenuButton and menu items)
],
)
“`
- – An `AppBar` widget is used to create the app bar at the top of the screen.
– Inside the app bar, there’s a `Row` widget that centers the logo or image using `mainAxisAlignment: MainAxisAlignment.center`. The logo or image is displayed using the `Image.asset` widget.
#### Popup Menu Button
“`dart
PopupMenuButton(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.asset(
“assets/yp_logo.png”,
width: 50,
),
),
onSelected: (value) {
// … (PopupMenuButton item selection logic)
},
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
// … (PopupMenuButton items)
],
)
“`
– A `PopupMenuButton` widget is used to create a popup menu.
– The `child` property displays an image (in this case, an asset) within a circular clip rectangle.
– The `onSelected` callback is triggered when a menu item is selected.
– `itemBuilder` is used to define the menu items inside the popup menu.
#### Popup Menu Items
“`dart
PopupMenuItem(
value: “Broadcast”,
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Icon(Icons.dashboard_customize_rounded),
),
const Text(
‘Broadcast’,
style: TextStyle(fontSize: 15),
),
],
),
)
- PopupMenuItem` widgets define individual items within the popup menu.
- – Each item includes an icon, such as `Icon(Icons.dashboard_customize_rounded)`, and a text label.
- – The `value` property is used to identify the selected item.
- Menu Options
– The popup menu includes options for navigation and actions, such as “Broadcast,” “Add Member,” “View Member,” “Nanmanam,” “DSP,” and “Logout.”-Each option is represented as a `PopupMenuItem` widget with a corresponding icon and text label.
- # Navigation
– When a menu item is selected, it navigates to a specific screen using `Navigator.push` based on the selected value.For example, selecting “Broadcast” navigates to the `Broadcast` screen, and selecting “Add Member” navigates to the `Add` screen.
- Logout
- – Selecting “Logout” from the menu triggers navigation to the `LoginScreen`, effectively logging the user out of the application.
This `CommonHeader` widget provides a consistent and customizable header for various screens within the Flutter application. It features a logo, a popup menu for navigation and actions, and clear documentation for each menu option’s functionality.
efficient QR code management tools. Whether users wish to revisit important QR codes or effortlessly share them with others, this screen optimizes user experience and ensures a hassle-free process for both viewing and sharing QR codes.
Audit: