alora menu page ui example

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider<AppData>(
      create: (context) => AppData(),
      builder: (context, child) => const MyApp(),
    ),
  );
}

class AppData extends ChangeNotifier {
  String userName = 'Md. Riaz';
  String userEmail = '[email protected]';
  bool pushNotificationsEnabled = true;
  ThemeMode themeMode = ThemeMode.light;
  int selectedIndex = 3;

  void updateUserName(String newName) {
    userName = newName;
    notifyListeners();
  }

  void updateUserEmail(String newEmail) {
    userEmail = newEmail;
    notifyListeners();
  }

  void togglePushNotifications(bool newValue) {
    pushNotificationsEnabled = newValue;
    notifyListeners();
  }

  void setThemeMode(ThemeMode newThemeMode) {
    themeMode = newThemeMode;
    notifyListeners();
  }

  void setSelectedIndex(int index) {
    selectedIndex = index;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Settings Page',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
        useMaterial3: true,
        brightness: Brightness.light,
        scaffoldBackgroundColor: Colors.white,
        textTheme: const TextTheme(
          bodyMedium: TextStyle(color: Colors.black),
          titleMedium: TextStyle(color: Colors.black),
        ),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.white,
          surfaceTintColor: Colors.white,
          titleTextStyle: TextStyle(color: Colors.black, fontSize: 20),
          iconTheme: IconThemeData(color: Colors.black),
          elevation: 2,
          shadowColor: Color.fromRGBO(128, 128, 128, 0.2),
        ),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.black,
        textTheme: const TextTheme(
          bodyMedium: TextStyle(color: Colors.white),
          titleMedium: TextStyle(color: Colors.white),
        ),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.black,
          surfaceTintColor: Colors.black,
          titleTextStyle: TextStyle(color: Colors.white, fontSize: 20),
          iconTheme: IconThemeData(color: Colors.white),
          elevation: 4,
          shadowColor: Color.fromRGBO(128, 128, 128, 0.5),
        ),
      ),
      themeMode: Provider.of<AppData>(context).themeMode,
      home: const MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appData = Provider.of<AppData>(context);
    int selectedIndex = appData.selectedIndex;

    Widget body;
    switch (selectedIndex) {
      case 0:
        body = const Center(child: Text('Home'));
        break;
      case 1:
        body = const Center(child: Text('Messages'));
        break;
      case 2:
        body = const Center(child: Text('eFax'));
        break;
      default:
        body = const SettingsPage();
    }

    return Scaffold(
      body: body,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        elevation: 8,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: 'Messages',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.fax),
            label: 'eFax',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.menu),
            label: 'Menu',
          ),
        ],
        currentIndex: selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: (int index) {
          appData.setSelectedIndex(index);
        },
      ),
    );
  }
}

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appData = Provider.of<AppData>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Menu'),
      ),
      body: ListView(
        children: [
          UserCard(appData: appData),
          const SectionHeader(title: 'General'),
          SettingsItem(
            icon: Icons.contacts,
            title: 'Contacts',
            onTap: () {
              // Navigate to contacts page
            },
          ),
          SettingsItem(
            icon: Icons.brightness_6,
            title: 'App Theme',
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const AppThemePage(),
                ),
              );
            },
          ),
          const SectionHeader(title: 'Notifications'),
          SettingsItem(
            icon: Icons.notifications_active,
            title: 'Push Notifications',
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const PushNotificationPage(),
                ),
              );
            },
          ),
          const SectionHeader(title: 'Security'),
          SettingsItem(
            icon: Icons.lock,
            title: 'Change Password',
            onTap: () {
              // Navigate to change password page
            },
          ),
          const SectionHeader(title: 'Voice'),
          SettingsItem(
            icon: Icons.devices,
            title: 'Active Devices',
            onTap: () {
              // Navigate to active devices page
            },
          ),
          SettingsItem(
            icon: Icons.call,
            title: 'Active Calls',
            onTap: () {
              // Navigate to active calls page
            },
          ),
          SettingsItem(
            icon: Icons.voicemail,
            title: 'Voicemails',
            onTap: () {
              // Navigate to voicemails page
            },
          ),
          Padding(
            padding: const EdgeInsets.only(top: 24.0),
            child: SettingsItem(
              icon: Icons.logout,
              title: 'Sign Out',
              onTap: () {
                // Handle sign out
              },
            ),
          ),
        ],
      ),
    );
  }
}

class UserCard extends StatelessWidget {
  const UserCard({
    super.key,
    required this.appData,
  });

  final AppData appData;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Card(
        elevation: 2,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24.0),
        ),
        color: Theme.of(context).cardColor,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            children: [
              const CircleAvatar(
                radius: 30,
                child: Icon(Icons.person),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      appData.userName,
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      appData.userEmail,
                      style: const TextStyle(fontSize: 14),
                    ),
                  ],
                ),
              ),
              IconButton(
                icon: const Icon(Icons.edit),
                onPressed: () {
                  // Navigate to user details page
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SectionHeader extends StatelessWidget {
  final String title;

  const SectionHeader({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        top: 16.0,
        left: 16.0,
        right: 16.0,
        bottom: 8.0,
      ),
      child: Text(
        title,
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
    );
  }
}

class SettingsItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final VoidCallback? onTap;
  final Widget? trailing;
  final Color? titleColor;
  final Color? iconColor;

  const SettingsItem({
    super.key,
    required this.icon,
    required this.title,
    this.onTap,
    this.trailing,
    this.titleColor,
    this.iconColor,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(
        icon,
        color: iconColor ?? Colors.black,
      ),
      title: Text(
        title,
        style: TextStyle(color: titleColor ?? Colors.black),
      ),
      trailing: trailing,
      onTap: onTap,
    );
  }
}

class AppThemePage extends StatelessWidget {
  const AppThemePage({super.key});

  @override
  Widget build(BuildContext context) {
    final appData = Provider.of<AppData>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('App Theme'),
      ),
      body: ListView(
        children: [
          SettingsItem(
            icon: Icons.brightness_6,
            title: 'App Theme',
            trailing: DropdownButton<ThemeMode>(
              value: appData.themeMode,
              items: const [
                DropdownMenuItem(
                  value: ThemeMode.light,
                  child: Text('Light'),
                ),
                DropdownMenuItem(
                  value: ThemeMode.dark,
                  child: Text('Dark'),
                ),
                DropdownMenuItem(
                  value: ThemeMode.system,
                  child: Text('System Default'),
                ),
              ],
              onChanged: (ThemeMode? newValue) {
                if (newValue != null) {
                  appData.setThemeMode(newValue);
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}

class PushNotificationPage extends StatelessWidget {
  const PushNotificationPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appData = Provider.of<AppData>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Push Notifications'),
      ),
      body: ListView(
        children: [
          SettingsItem(
            icon: Icons.notifications_active,
            title: 'Push Notifications',
            trailing: Switch(
              value: appData.pushNotificationsEnabled,
              onChanged: (bool newValue) {
                appData.togglePushNotifications(newValue);
              },
            ),
          ),
        ],
      ),
    );
  }
}