Flutter GoRouter: Best Practices for Scalable Navigation , Go Router Ko kese Use kore

 

Flutter GoRouter: Best Practices for Scalable Navigation

Navigation is a critical part of any Flutter app, and GoRouter is one of the best packages for managing routing efficiently. However, as an app grows, structuring routes properly becomes essential to maintain clean and scalable code.

In this article, we will explore three different approaches to using GoRouter in Flutter, comparing their pros and cons to determine the best choice for growing applications.

Go Router Ko kese Use kore 

---

**1️⃣ Approach 1: Direct GoRouter in **main.dart

Overview

This approach defines all routes directly inside main.dart using GoRouter. It works well for small applications but can become unmanageable as the app grows.

Example Code

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:poshanmonitor/home.dart';
import 'package:poshanmonitor/splashscreen/splash_screen.dart';
import '../beneficiaries/beneficiaries.dart';

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const SplashScreen(),
    ),
    GoRoute(
      path: '/beneficiaries',
      builder: (context, state) => const Beneficiaries(),
    ),
  ],
  errorBuilder: (context, state) => Scaffold(
    body: Center(child: Text('Error: ${state.error}')),
  ),
);

void main() {
  runApp(MaterialApp.router(
    routerConfig: router,
  ));
}

Pros & Cons

✅ Simple and easy to implement.
✅ Works well for small apps.
❌ Becomes messy as the app grows.
❌ Harder to maintain and scale.

Best for: Small apps with only a few screens.

---

2️⃣ Approach 2: Using an appRoutes() Function

Overview

Instead of defining all routes in main.dart, this approach moves routing logic into a separate function, keeping main.dart cleaner.

Example Code

GoRouter appRoutes() {
  return GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const SplashScreen(),
      ),
      GoRoute(
        path: '/beneficiaries',
        builder: (context, state) => const Beneficiaries(),
      ),
    ],
  );
}

void main() {
  runApp(MaterialApp.router(
    routerConfig: appRoutes(),
  ));
}

Pros & Cons

✅ More organized than Approach 1.
✅ Makes main.dart cleaner.
❌ Still keeps all routes in one function, which can get long.

Best for: Medium-sized apps that need better organization.

---

3️⃣ Approach 3: AppRouter Class with Named Routes

Overview

This approach modularizes routing by using an AppRouter class and a RouteNames file. It is highly scalable and best for large apps.

Step 1: Create a route_names.dart File

class RouteNames {
  static const String splash = '/';
  static const String beneficiaries = '/beneficiaries';
  static const String calculator = '/calculator';
  static const String distribution = '/distribution';
}

Step 2: Create app_router.dart (Your GoRouter Configuration)

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:poshanmonitor/home.dart';
import 'package:poshanmonitor/splashscreen/splash_screen.dart';
import '../beneficiaries/beneficiaries.dart';
import 'route_names.dart';

class AppRouter {
  static final router = GoRouter(
    initialLocation: RouteNames.splash,
    errorBuilder: (context, state) => const Scaffold(
      body: Center(child: Text('Error: Page not found')),
    ),
    routes: [
      GoRoute(
        path: RouteNames.splash,
        builder: (context, state) => const SplashScreen(),
      ),
      GoRoute(
        path: RouteNames.beneficiaries,
        builder: (context, state) => const Beneficiaries(),
      ),
    ],
  );
}

**Step 3: Use This in **main.dart

void main() {
  runApp(MaterialApp.router(
    routerConfig: AppRouter.router,
    title: 'Poshan Monitor',
    theme: ThemeData(primarySwatch: Colors.blue),
  ));
}

Pros & Cons

✅ Best organization & modularity.
✅ Scales well for large applications.
✅ Avoids hardcoded strings by using RouteNames.
✅ Makes adding new routes easy.
❌ Requires initial setup.

Best for: Large and growing applications.

---

🎯 Final Verdict: Which One is Best?

Approach	Best For	Pros	Cons
**1️⃣ Direct GoRouter in **main.dart	Small apps	Simple, easy to implement	Hard to maintain long-term
2️⃣ appRoutes() Function	Medium apps	Cleaner than Approach 1	Still gets large as the app grows
3️⃣ AppRouter Class with Named Routes	Large & scalable apps	Best structure, modular, easy to expand	Requires more initial setup

🚀 Best Choice for Poshan Monitor App?

Since Poshan Monitor is growing, Approach 3 (AppRouter Class with Named Routes) is the best choice because:

• The app already has multiple screens (beneficiaries, calculator, distribution).
• More features might be added later (e.g., User Profiles, Reports, Notifications).
• Clean, modular, and professional-grade structure.

---

💬 Conclusion

If you’re building a simple app with just a few screens, Approach 1 (Direct GoRouter) works fine. However, as your app grows, you need to keep things modular and maintainable.

For most real-world applications, especially those expected to scale, Approach 3 (AppRouter with Named Routes) is the best choice.

✅ Clean structure
✅ Easy to add new routes
✅ Best for long-term scalability

Would you like me to optimize your GoRouter setup for your specific app? Let me know in the comments! 🚀