# Setting up Navigation with GoRouter in Flutter

### Step 1: Add GoRouter to Your Project

Run the following command to add GoRouter to your project:

```bash
flutter pub add go_router

```

### Step 2: Project Structure

In the **lib/** folder, create the following folders and files based on your notes:

1. **routes/** folder:
   * **route\_names.dart** – for route name constants.
   * **route\_config.dart** – for defining GoRouter configurations.
2. **screens/** folder – create individual screens here.

### Step 3: Defining Route Names

In **routes/route\_names.dart**, define your route names as constants.

```dart
class RouteNames {
  static const String initial = "initial";
  static const String screenOne = "screen_one";
  static const String screenTwo = "screen_two";
  static const String screenTwoSectionOne = "screen_two_section_one";
}

```

### Step 4: Configuring GoRouter

In **routes/route\_config.dart**, set up the route configuration.

```dart
import 'package:go_router/go_router.dart';
import '../screens/initial_screen.dart';
import '../screens/screen_one.dart';
import '../screens/screen_two.dart';

class RouteConfig {
  static GoRouter returnRouter() {
    return GoRouter(
      initialLocation: "/",
      routes: [
        // Initial Route
        GoRoute(
          path: "/",
          name: RouteNames.initial,
          pageBuilder: (context, state) {
            return const MaterialPage(child: InitialScreen());
          },
        ),
        
        // Screen One
        GoRoute(
          path: "/screen_one",
          name: RouteNames.screenOne,
          pageBuilder: (context, state) {
            return const MaterialPage(child: ScreenOne());
          },
        ),
        
        // Screen Two
        GoRoute(
          path: "/screen_two",
          name: RouteNames.screenTwo,
          pageBuilder: (context, state) {
            return const MaterialPage(child: ScreenTwo());
          },
          routes: [
            // Nested Path: Section One in Screen Two
            GoRoute(
              path: "section_one",
              name: RouteNames.screenTwoSectionOne,
              pageBuilder: (context, state) {
                return const MaterialPage(child: ScreenTwoSectionOne());
              },
            ),
          ],
        ),
      ],
    );
  }
}

```

### Step 5: Integrate GoRouter in Main Application

In **main.dart**, initialize the router using the GoRouter configuration.

```dart
import 'package:flutter/material.dart';
import 'routes/route_config.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: RouteConfig.returnRouter(),
      title: 'Flutter App with GoRouter',
    );
  }
}

```

### Step 6: Navigation

Use `context.goNamed` or `context.go` for navigation as outlined in your notes.

#### Example: Navigate Using Route Names

Navigate to **Screen One** by using the route name:

```dart
context.goNamed(RouteNames.screenOne);
```

Example: Navigate Using Path

Navigate to **Screen Two, Section One**:

```dart
context.go("/screen_two/section_one");
```

### Step 7: Passing Parameters

To pass parameters in routes, modify the configuration and use path parameters.

Define a Route with Parameters

In **route\_config.dart**, define a route with a parameter.

```dart
GoRoute(
  path: "/screen_three/:name",
  name: "screen_three",
  pageBuilder: (context, state) {
    final name = state.pathParameters['name']!;
    return MaterialPage(child: ScreenThree(name: name));
  },
);

```

Navigate with Parameters

Use the following to pass parameters:

```dart
context.goNamed("screen_three", pathParameters: {'name': 'Ayat'});
```

Or use the direct path:

```dart
context.go("/screen_three/Ayat");
```

### Step 8: Handling Errors

Define an error route for any undefined paths.

```dart
GoRoute(
  path: "*",
  pageBuilder: (context, state) {
    return const MaterialPage(child: ErrorScreen());
  },
);

```

### Step 9: Nested Routes Example

If you have a more complex structure with nested paths, configure them like this:

```dart
GoRoute(
  path: "/dashboard",
  name: "dashboard",
  routes: [
    GoRoute(
      path: "screen_one",
      name: "dashboard_screen_one",
      pageBuilder: (context, state) {
        return const MaterialPage(child: ScreenOne());
      },
    ),
  ],
);

```

### Summary

This setup includes:

1. Adding GoRouter.
2. Defining route names in **route\_names.dart**.
3. Setting up GoRouter configuration in **route\_config.dart**.
4. Navigating using route names and paths.
5. Passing parameters.
6. Nested routes for complex structures.
7. Error handling for undefined routes.