created the front end of the notification page

lib/front-end-of-the-notification-page.dart

@@ -0,0 +1,154 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+        scaffoldBackgroundColor: const Color(0xFFF5F7FA),
+      ),
+      home: const NotificationSettingsScreen(),
+    );
+  }
+}
+
+class NotificationSettingsScreen extends StatefulWidget {
+  const NotificationSettingsScreen({Key? key}) : super(key: key);
+
+  @override
+  State<NotificationSettingsScreen> createState() => _NotificationSettingsScreenState();
+}
+
+class _NotificationSettingsScreenState extends State<NotificationSettingsScreen> {
+  bool emailNotification = true;
+  bool mobileNotification = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        centerTitle: true,
+        title: const Text(
+          'Notifications Settings',
+          style: TextStyle(
+            color: Colors.black,
+            fontWeight: FontWeight.w600,
+            fontSize: 18,
+          ),
+        ),
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back_ios, color: Colors.black, size: 20),
+          onPressed: () {},
+        ),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: [
+            const SizedBox(height: 20),
+            NotificationSettingTile(
+              icon: Icons.email_outlined,
+              title: 'Email Notification',
+              subtitle: 'Recieved directly to your email',
+              isActive: emailNotification,
+              onChanged: (value) {
+                setState(() {
+                  emailNotification = value;
+                });
+              },
+            ),
+            const Divider(height: 1, thickness: 0.5),
+            NotificationSettingTile(
+              icon: Icons.smartphone_outlined,
+              title: 'Mobile Notification',
+              subtitle: 'Recieved directly to your device',
+              isActive: mobileNotification,
+              onChanged: (value) {
+                setState(() {
+                  mobileNotification = value;
+                });
+              },
+            ),
+            const Divider(height: 1, thickness: 0.5),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class NotificationSettingTile extends StatelessWidget {
+  final IconData icon;
+  final String title;
+  final String subtitle;
+  final bool isActive;
+  final ValueChanged<bool> onChanged;
+
+  const NotificationSettingTile({
+    Key? key,
+    required this.icon,
+    required this.title,
+    required this.subtitle,
+    required this.isActive,
+    required this.onChanged,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 12.0),
+      child: Row(
+        children: [
+          Icon(
+            icon,
+            size: 24,
+            color: Colors.black87,
+          ),
+          const SizedBox(width: 16),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  title,
+                  style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.black,
+                  ),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  subtitle,
+                  style: const TextStyle(
+                    fontSize: 14,
+                    color: Colors.grey,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Switch(
+            value: isActive,
+            onChanged: onChanged,
+            activeColor: Colors.white,
+            activeTrackColor: Colors.blue,
+            inactiveThumbColor: Colors.white,
+            inactiveTrackColor: Colors.grey.shade300,
+          ),
+        ],
+      ),
+    );
+  }
+}
+