Skip to content

ROUTES_CONFIGURATION.md

Latest commit

 

History

History
443 lines (378 loc) · 11 KB

ROUTES_CONFIGURATION.md

File metadata and controls

443 lines (378 loc) · 11 KB

Green-Time App - main.dart Route Configuration

Add these routes to your lib/main.dart file in the MaterialApp widget.

Routes to Add

MaterialApp(
  // ... other properties ...
  routes: {
    // Child user routes
    '/child_login': (context) => const ChildLoginScreen(),
    '/child_dashboard': (context) => const ChildDashboard(),
    '/child_account': (context) => const ChildAccountScreen(),
    '/proof_photo_capture': (context) {
      // Note: You'll need to pass task data via arguments or previous page
      // This is a placeholder - see implementation notes below
      return const ProofPhotoCaptureScreen(
        task: Task(
          id: '',
          title: 'Task',
          description: 'Description',
          points: 0,
          createdAt: DateTime(2024),
        ),
        childUsername: 'child',
      );
    },

    // Parent user routes
    '/parent_login': (context) => const ParentLoginScreen(),
    '/parent_dashboard': (context) => const ParentDashboard(),
    '/add_child': (context) => const AddChildScreen(),
    
    // Fallback
    '/': (context) => const ParentLoginScreen(), // or your splash screen
  },

  // Set initial route
  home: const ParentLoginScreen(), // or splash screen

  // ... rest of MaterialApp config ...
);

Import Statements

Add these imports to your main.dart:

// Child screens
import 'lib/Screens/child_login_screen.dart';
import 'lib/Screens/child_dashboard.dart';
import 'lib/Screens/child_account_screen.dart';
import 'lib/Screens/proof_photo_capture_screen.dart';

// Parent screens
import 'lib/Screens/parent_login_screen.dart';
import 'lib/Screens/parent_dashboard.dart';
import 'lib/Screens/add_child_screen.dart';

// Models
import 'lib/Models/task.dart';

// Services (if not already imported)
import 'lib/services/task_service.dart';
import 'lib/services/eco_points_service.dart';
import 'lib/services/camera_service.dart';
import 'lib/services/auth_service.dart';
import 'lib/services/tinydb_service.dart';

Advanced Navigation with Arguments

For proof_photo_capture, you may want to pass task data. Use named routes with arguments:

// In home/dashboard widget, navigate with arguments:
Navigator.pushNamed(
  context,
  '/proof_photo_capture',
  arguments: {
    'task': task,
    'childUsername': childUsername,
  },
);

// In main.dart route definition:
'/proof_photo_capture': (context) {
  final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
  return ProofPhotoCaptureScreen(
    task: args['task'] as Task,
    childUsername: args['childUsername'] as String,
  );
},

Entry Point Configuration

Option 1: Start with Parent Login

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await TinyDB.initialize();
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => AppState()),
        ChangeNotifierProvider(create: (_) => ThemeProvider()),
      ],
      child: MaterialApp(
        title: 'Green-Time',
        theme: ThemeData(
          primaryColor: const Color(0xFF29B6F6),
          useMaterial3: true,
        ),
        home: const ParentLoginScreen(), // Entry point
        routes: {
          // ... routes listed above ...
        },
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

Option 2: Start with Role Selection

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => AppState()),
        ChangeNotifierProvider(create: (_) => ThemeProvider()),
      ],
      child: MaterialApp(
        title: 'Green-Time',
        theme: ThemeData(
          primaryColor: const Color(0xFF29B6F6),
          useMaterial3: true,
        ),
        home: const RoleSelectionScreen(), // Decision screen
        routes: {
          '/child_login': (context) => const ChildLoginScreen(),
          '/parent_login': (context) => const ParentLoginScreen(),
          // ... other routes ...
        },
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

Optional: Role Selection Screen

If you want a role selection screen before login:

class RoleSelectionScreen extends StatelessWidget {
  const RoleSelectionScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.eco,
              size: 80,
              color: Colors.green,
            ),
            const SizedBox(height: 24),
            Text(
              'Green-Time',
              style: GoogleFonts.poppins(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 48),
            ElevatedButton.icon(
              onPressed: () {
                Navigator.pushNamed(context, '/parent_login');
              },
              icon: const Icon(Icons.person),
              label: const Text('Parent Login'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(
                  horizontal: 48,
                  vertical: 16,
                ),
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: () {
                Navigator.pushNamed(context, '/child_login');
              },
              icon: const Icon(Icons.child_care),
              label: const Text('Child Login'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(
                  horizontal: 48,
                  vertical: 16,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Testing Routes

Once configured, you can test routes from anywhere:

// Navigate to child login
Navigator.pushNamed(context, '/child_login');

// Navigate to parent dashboard
Navigator.pushNamed(context, '/parent_dashboard');

// Navigate and remove all previous routes
Navigator.pushNamedAndRemoveUntil(
  context,
  '/child_dashboard',
  (route) => false,
);

// Navigate with fade animation
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ChildDashboard()),
);

Navigation Helpers

Add these helper functions to utils for cleaner navigation:

// utils/navigation_helpers.dart

class NavigationHelper {
  static void goToChildLogin(BuildContext context) {
    Navigator.pushNamedAndRemoveUntil(
      context,
      '/child_login',
      (route) => false,
    );
  }

  static void goToChildDashboard(BuildContext context) {
    Navigator.pushNamedAndRemoveUntil(
      context,
      '/child_dashboard',
      (route) => false,
    );
  }

  static void goToParentLogin(BuildContext context) {
    Navigator.pushNamedAndRemoveUntil(
      context,
      '/parent_login',
      (route) => false,
    );
  }

  static void goToParentDashboard(BuildContext context) {
    Navigator.pushNamedAndRemoveUntil(
      context,
      '/parent_dashboard',
      (route) => false,
    );
  }

  static void goToProofCapture(
    BuildContext context,
    Task task,
    String childUsername,
  ) {
    Navigator.pushNamed(
      context,
      '/proof_photo_capture',
      arguments: {
        'task': task,
        'childUsername': childUsername,
      },
    );
  }
}

Then use like:

NavigationHelper.goToParentDashboard(context);
NavigationHelper.goToChildLogin(context);

Troubleshooting

Route Not Found Error

Error: Could not find a generator for route named '/route_name'

Solution: Make sure the route is defined in routes: {} in MaterialApp

Arguments Not Received

// Make sure to check for null
final args = ModalRoute.of(context)?.settings.arguments;
if (args == null) {
  // Handle missing arguments
}

Back Button Behavior

// Prevent back button on login screens
WillPopScope(
  onWillPop: () async => false,
  child: Scaffold(...),
);

Complete main.dart Template

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

// Services
import 'lib/services/tinydb_service.dart';

// Screens
import 'lib/Screens/child_login_screen.dart';
import 'lib/Screens/child_dashboard.dart';
import 'lib/Screens/child_account_screen.dart';
import 'lib/Screens/parent_login_screen.dart';
import 'lib/Screens/parent_dashboard.dart';
import 'lib/Screens/add_child_screen.dart';

// Models
import 'lib/Models/app_state.dart';

// Theme
import 'lib/theme/theme_provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  // Initialize TinyDB
  await TinyDB.initialize();
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => AppState()),
        ChangeNotifierProvider(create: (_) => ThemeProvider()),
      ],
      child: Consumer<ThemeProvider>(
        builder: (context, themeProvider, child) {
          return MaterialApp(
            title: 'Green-Time',
            theme: ThemeData(
              useMaterial3: true,
              brightness: Brightness.light,
              primaryColor: const Color(0xFF29B6F6),
            ),
            darkTheme: ThemeData(
              useMaterial3: true,
              brightness: Brightness.dark,
              primaryColor: const Color(0xFF29B6F6),
            ),
            themeMode: themeProvider.isDarkMode
                ? ThemeMode.dark
                : ThemeMode.light,
            home: const ParentLoginScreen(),
            routes: {
              // Child routes
              '/child_login': (context) => const ChildLoginScreen(),
              '/child_dashboard': (context) => const ChildDashboard(),
              '/child_account': (context) => const ChildAccountScreen(),

              // Parent routes
              '/parent_login': (context) => const ParentLoginScreen(),
              '/parent_dashboard': (context) => const ParentDashboard(),
              '/add_child': (context) => const AddChildScreen(),
            },
            debugShowCheckedModeBanner: false,
          );
        },
      ),
    );
  }
}

That's all! Your routes are now configured and ready to use.

For navigation examples, see NAVIGATION_GUIDE.md