Building Navigation with go_router_builder : A Counter App Example

[Nikesh]

Flutter's go_router_builder provides a powerful, type-safe way to manage navigation in your app. It simplifies URL-based routing, enabling you to handle deep links, nested navigation, and more. In this blog, we'll explore the basics of go_router_builder by building a simple counter app.

Prerequisites
Before starting, ensure you have:

Flutter installed on your machine

Basic understanding of Dart and Flutter widgets

Added the go_router and go_router_builder packages to your pubspec.yaml file:

dependencies:
go_router: ^9.0.1
go_router_builder: ^1.0.0

Run flutter pub get to fetch the dependencies.

Step 1: Setting Up Routes
The go_router_builder package uses annotations to define routes. First, create a new file named app_routes.dart and annotate your routes:

import 'package:go_router/go_router.dart';
import 'package:go_router_builder/go_router_builder.dart';
import 'main.dart'; // Import screens

part 'app_routes.g.dart';

@TypedGoRoute(path: '/')
class CounterRoute extends GoRouteData {
@override
Widget build(BuildContext context) => const CounterScreen();
     }

@TypedGoRoute(path: '/details')
class DetailsRoute extends GoRouteData {
@override
Widget build(BuildContext context) => const DetailsScreen();
}

The @TypedGoRoute annotation generates type-safe navigation helpers. Save the file and run the following command to generate route-related code:

flutter pub run build_runner build

This creates the app_routes.g.dart file with navigation utilities.

Step 2: Implementing Screens
Now, create the screens for your app. Start with CounterScreen and DetailsScreen:

CounterScreen

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

class CounterScreen extends StatefulWidget {
const CounterScreen({Key? key}) : super(key: key);

@override
State createState() => _CounterScreenState();
}

class _CounterScreenState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: const Text('Counter App')),
body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter Value: $_counter', style: Theme.of(context).textTheme.headline4),
ElevatedButton(onPressed: () {DetailsRoute().go(context);},child: const Text('Go to Details'),),
                ],
       ),
 ),
floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,
tooltip: 'Increment', child: const Icon(Icons.add),)
         );
}
}

DetailsScreen

import 'package:flutter/material.dart';

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

@override
Widget build(BuildContext context) {
       return Scaffold(
appBar: AppBar(title: const Text('Details Screen')),
body: Center(child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: const Text('Back to Counter'),
            ),
       ),
    );
 }
}

Step 3: Configuring GoRouter
Next, set up the GoRouter instance in your main.dart:

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

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

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

@override
Widget build(BuildContext context) {
return MaterialApp.router(routerConfig: GoRouter(
routes: $appRoutes,
              ),
     );
  }
}

The $appRoutes variable, generated by go_router_builder, contains your app’s route configuration.

Step 4: Running the App
Run the app using flutter run. You’ll see the counter screen with a button to navigate to the details screen.

Conclusion
With go_router_builder, managing navigation becomes more structured and type-safe. This counter app demonstrates the fundamentals, but you can extend it to handle complex routing scenarios like nested routes, parameters, and deep linking.

Experiment with this setup to unlock the full potential of go_router_builder in your Flutter projects!