webadmin 0.0.6

webadmin: ^0.0.6 copied to clipboard

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

/// Main application widget
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'WebAdmin Dashboard Example',
      theme: ThemeData(
        brightness: Brightness.light,
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.light,
        ),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
      ),
      themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: AdminDashboard(
        onThemeChanged: (value) => setState(() => isDarkMode = value),
        isDarkMode: isDarkMode,
      ),
    );
  }
}

/// Main dashboard container
/// 
/// Simple example with automatic menu generation from DashboardPage list
class AdminDashboard extends StatefulWidget {
  final ValueChanged<bool> onThemeChanged;
  final bool isDarkMode;

  const AdminDashboard({
    super.key,
    required this.onThemeChanged,
    required this.isDarkMode,
  });

  @override
  State<AdminDashboard> createState() => _AdminDashboardState();
}

class _AdminDashboardState extends State<AdminDashboard> {
  int selectedIndex = 0;

  /// Define all pages in a single list
  late final List<DashboardPage> pages = [
    DashboardPage(
      icon: Icons.dashboard,
      title: 'Dashboard',
      route: 'dashboard',
      description: 'Welcome to your admin dashboard',
      builder: (context) => const DashboardScreenWidget(),
    ),
    DashboardPage(
      icon: Icons.bar_chart,
      title: 'Analytics',
      route: 'analytics',
      description: 'View detailed analytics and metrics',
      builder: (context) => const AnalyticsScreenWidget(),
    ),
    DashboardPage(
      icon: Icons.shopping_cart,
      title: 'Products',
      route: 'products',
      description: 'Manage your product inventory',
      builder: (context) => const ProductsScreenWidget(),
    ),
    DashboardPage(
      icon: Icons.people,
      title: 'Users',
      route: 'users',
      description: 'Manage user accounts',
      builder: (context) => const UsersScreenWidget(),
    ),
    DashboardPage(
      icon: Icons.settings,
      title: 'Settings',
      route: 'settings',
      description: 'Configure application settings',
      builder: (context) => SettingsScreenWidget(
        isDarkMode: widget.isDarkMode,
        onThemeChanged: widget.onThemeChanged,
      ),
    ),
    DashboardPage(
      icon: Icons.help_outline,
      title: 'Help',
      route: 'help',
      description: 'Get help and support',
      builder: (context) => const HelpScreenWidget(),
    ),
  ];

  List<DashboardPage> get topPages => pages.sublist(0, 4);
  List<DashboardPage> get bottomPages => pages.sublist(4);

  @override
  Widget build(BuildContext context) {
    final currentPage = pages[selectedIndex];

    return Scaffold(
      body: DashboardLayout(
        topItems: topPages.map((p) => p.toMenuItem()).toList(),
        bottomItems: bottomPages.map((p) => p.toMenuItem()).toList(),
        selectedIndex: selectedIndex,
        onSelect: (index) => setState(() => selectedIndex = index),
        brandTitle: 'Admin Dashboard',
        currentPage: currentPage,
        contentWidget: pages[selectedIndex].builder(context),
        showPageHeader: true,
        showHeaderIcon: true,
        headerTitleSize: 28.0,
        headerDescriptionSize: 16.0,
      ),
    );
  }
}

// ============================================================
// 📺 SCREEN WIDGETS
// ============================================================

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(24),
      children: const [
        RevenueCard(amount: 45230, title: 'Today\'s Revenue'),
        SizedBox(height: 16),
        WarehouseCard(productCount: 128, buyAmount: 89342),
        SizedBox(height: 16),
        GrowthCard(
          label: 'Last Month',
          percent: 0.18,
          color: Colors.green,
          icon: Icons.trending_up,
        ),
        SizedBox(height: 16),
        MetalPricesCard(goldPrice: 112.7, silverPrice: 1.36),
        SizedBox(height: 16),
        GoldPriceChart(values: [108, 109, 110, 111, 113, 114, 115]),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.bar_chart,
            size: 64,
            color: Colors.blue.withValues(alpha: 0.3),
          ),
          const SizedBox(height: 16),
          Text(
            'Analytics Dashboard',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          const SizedBox(height: 8),
          Text(
            'View charts, graphs, and detailed metrics',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.shopping_bag,
            size: 64,
            color: Colors.blue.withValues(alpha: 0.3),
          ),
          const SizedBox(height: 16),
          Text(
            'Products Management',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          const SizedBox(height: 8),
          Text(
            'Add, edit, and manage your product catalog',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.people,
            size: 64,
            color: Colors.blue.withValues(alpha: 0.3),
          ),
          const SizedBox(height: 16),
          Text(
            'User Management',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          const SizedBox(height: 8),
          Text(
            'View and manage all user accounts',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ],
      ),
    );
  }
}

class SettingsScreenWidget extends StatelessWidget {
  final bool isDarkMode;
  final ValueChanged<bool> onThemeChanged;

  const SettingsScreenWidget({
    super.key,
    required this.isDarkMode,
    required this.onThemeChanged,
  });

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(24),
      children: [
        Card(
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Theme Settings',
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 16),
                SwitchListTile(
                  title: const Text('Dark Mode'),
                  subtitle: const Text('Enable dark theme for the application'),
                  value: isDarkMode,
                  onChanged: onThemeChanged,
                  contentPadding: EdgeInsets.zero,
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),
        Card(
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'General Settings',
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 16),
                const ListTile(
                  title: Text('Language'),
                  subtitle: Text('English'),
                  trailing: Icon(Icons.arrow_forward),
                  contentPadding: EdgeInsets.zero,
                ),
                const Divider(),
                const ListTile(
                  title: Text('Notifications'),
                  subtitle: Text('Manage notification preferences'),
                  trailing: Icon(Icons.arrow_forward),
                  contentPadding: EdgeInsets.zero,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.help,
            size: 64,
            color: Colors.blue.withValues(alpha: 0.3),
          ),
          const SizedBox(height: 16),
          Text(
            'Help Center',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          const SizedBox(height: 8),
          Text(
            'Browse documentation and contact support',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ],
      ),
    );
  }
}