10. Declarative Navigation with GoRouter: URL-based Routing, Nested ShellRoutes & Redirect Guards • Flutter & Dart Mobile Systems Architecture • Rishabh Ki Kaksha

Flutter & Dart Mobile Systems Architecture › 10. Declarative Navigation with GoRouter: URL-based Routing, Nested ShellRoutes & Redirect Guards

45 mins

← Prev Next →

Course Syllabus

Module 1: Dart 3+ Language Internals, Sound Null Safety & Concurrency (Isolates)

01. Dart 3+ Evolution: Sound Null Safety, Records, Pattern Matching & Sealed Classes 02. Dart Concurrency: Event Loops, Microtask Queue, Futures, Streams & Isolates (Spawn/Compute) 03. Dart Memory Management: Generational Garbage Collection & Object Pool Allocation

Part 1: Dart Mastery & Widget Tree Engine

Module 2: Flutter Rendering Pipeline: 3 Trees Architecture & Impeller Engine

04. Flutter Rendering Architecture: The 3 Trees (Widget Tree, Element Tree & RenderObject Tree) 05. The Impeller Rendering Engine: Vulkan/Metal Pre-compiled Shaders & Zero Junk Architecture 06. Custom RenderObjects & CustomPainter: Building High-Performance 60FPS Charts & UI Effects

Part 2: Platform Channels, Canvas & App Deployment

Module 3: Advanced State Management: Bloc, Cubit, Riverpod 2 & Signals

07. State Management Overview: Ephemeral vs App State & InheritedWidget Internals 08. BLoC (Business Logic Component) & Cubit Architecture with Reactive Streams 09. Riverpod 2.0 Masterclass: Auto-Dispose, Family Providers & Code Generation (riverpod_generator)

Module 4: Declarative Routing, Deep Linking with GoRouter & Micro-Apps

10. Declarative Navigation with GoRouter: URL-based Routing, Nested ShellRoutes & Redirect Guards 11. Deep Linking Architecture on Android & iOS with GoRouter Integration 12. Micro-App Architecture & Modularization in Enterprise Flutter Codebases

Module 5: Native Platform Channels, FFI (Foreign Function Interface) & SQLite (Drift)

13. Platform Channels: MethodChannel, EventChannel & BasicMessageChannel for Swift/Kotlin Interop 14. Dart FFI (Foreign Function Interface): Calling High-Performance C/C++ & Rust Native Libraries 15. High-Speed Local Persistence: Hive, Isar & Type-Safe SQLite with Drift (Moor)

Module 6: Flutter Clean Architecture, Testing & Multi-Platform Deployment (iOS, Android, Web)

16. Enterprise Clean Architecture: Domain, Data & Presentation Layers Separation 17. Network Resilience Layer: Dio Interceptors, Refresh Token Auto-Retry & Offline Cache Interceptor 18. Comprehensive Testing Suite: Unit Tests, Widget Tests & Integration Tests with Mockito/Mocktail 19. Flutter Web & Desktop Optimization: Responsive Layouts, Wasm Compilation & SEO Strategies 20. Automated CI/CD Pipelines with GitHub Actions, Fastlane & Codemagic for App Store Distribution

Interactive Lesson Studio

# 10. Declarative Navigation with GoRouter: URL-based Routing, Nested ShellRoutes & Redirect Guards

> Flutter & Dart Notes by Rishabh - Topic 10

---

### 1. GoRouter Architecture (Declarative Navigator 2.0 🧭)

URL-driven stateful navigation system jo Web URL sync, Mobile Deep links aur Nested Bottom Tabs ko seamlessly handle karta hai:

```dart
final goRouter = GoRouter(
    initialLocation: '/home',
    redirect: (context, state) {
        final isLoggedIn = authService.isAuthenticated;
        final isLoggingIn = state.matchedLocation == '/login';
        if (!isLoggedIn) return isLoggingIn ? null : '/login';
        if (isLoggingIn) return '/home';
        return null; // No redirect needed
    },
    routes: [
        StatefulShellRoute.indexedStack(
            builder: (context, state, navigationShell) => ScaffoldWithBottomNav(navigationShell: navigationShell),
            branches: [
                StatefulShellBranch(routes: [GoRoute(path: '/home', builder: (context, state) => const HomeScreen())]),
                StatefulShellBranch(routes: [GoRoute(path: '/courses', builder: (context, state) => const CoursesScreen())]),
                StatefulShellBranch(routes: [GoRoute(path: '/profile', builder: (context, state) => const ProfileScreen())]),
            ],
        ),
        GoRoute(
            path: '/course/:id',
            builder: (context, state) => CourseDetailScreen(courseId: state.pathParameters['id']!),
        ),
    ],
);
```

---

### 2. Master Comparison Matrix

---

### 3. Interview Ke 3 Sawal Is Topic Se

1. **`StatefulShellRoute.indexedStack` persistent bottom navigation me kaise help karta hai?** -> Har tab ki scroll position aur widget state ko memory me intact rakhta hai tab switch karte waqt.
2. **GoRouter redirect loop se kaise bacha jata hai?** -> `state.matchedLocation` check karke target path aur redirect path ka equality condition enforce karna.
3. **`extra` parameter vs `pathParameters` me kya tradeoff hai?** -> `pathParameters` URL bar aur deep links me serializable rehte hain; `extra` complex Dart objects pass karta hai par browser refresh par lose ho sakta hai.

---
**Next Topic:** 11. Deep Linking Architecture on Android & iOS with GoRouter Integration

Loading lesson content...

Dart

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track