🧩 GoRouter Modular 💉
Simplifying modules dependency injections
GoRouter Modular simplifies Flutter development by implementing a modular architecture.
It utilizes GoRouter for route management 🧩 and supports per-module dependency injection with auto-dispose 💉.
With GoRouter Modular, you can easily organize your application into independent modules, streamlining code development and maintenance while promoting component reuse and project scalability.
Simplify your Flutter app development and accelerate your workflow with GoRouter Modular.
Installation
flutter pub add go_router_modular
or
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get): dependencies:
go_router_modular: ^2.0.1+2
Start
- Create an app_module.dart
- Create an app_widget.dart
- Configure your main.dart
Below you will find an example of the structure and how each file should look.
Project Structure example
📁 src
📁 modules
📁 home
📄 home_controller.dart
📄 home_page.dart
📄 home_module.dart
📄 app_module.dart
📄 app_widget.dart
📄 main.dart
Main Example
import 'package:example/src/app_module.dart';
import 'package:example/src/app_widget.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:go_router_modular/go_router_modular.dart';
import 'package:flutter_web_plugins/url_strategy.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
if (kIsWeb) usePathUrlStrategy();
Modular.configure(appModule: AppModule(), initialRoute: "/"); // Configure Modular
runApp(AppWidget()); // Define AppWidget
}
AppWidget Example
import 'package:example/src/app_module.dart';
import 'package:flutter/material.dart';
import 'package:go_router_modular/go_router_modular.dart';
class AppWidget extends StatelessWidget {
const AppWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router( // Use MaterialApp.router
routerConfig: Modular.routerConfig, // Define Router config
title: 'Modular GoRoute Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
AppModule Example
import 'package:example/src/modules/home/home_module.dart';
import 'package:example/src/modules/user/aplication/user_store.dart';
import 'package:example/src/modules/user/user_module.dart';
import 'package:go_router_modular/go_router_modular.dart';
class AppModule extends Module {
@override
List<Bind<Object>> get binds => [
Bind.singleton<AuthController>((i) => AuthController()), // define binds global in app_module
];
@override
List<ModularRoute> get routes => [ // define modules
ModuleRoute("/", module: HomeModule()),
];
}
DEPENDECY INJECTION 💉
⚠️ Attention
Every dependency when placed in a BIND must be TYPED for correct operation.
Example:
✅ Bind.singleton<HomeController>((i) => HomeController())
❌ Bind.singleton((i) => HomeController())
Injecting a Dependency
You should create a class for your module and extend it from Module. Add your dependencies in the binds.
As soon as there are no routes for your module in the widget tree, the module will automatically dispose of the binds
Example:
import 'package:example/src/modules/home/presenters/home_page.dart';
import 'package:go_router_modular/go_router_modular.dart';
class HomeModule extends Module {
@override
List<Bind<Object>> get binds => [
Bind.singleton<HomeController>((i) => HomeController()), // DEFINE BINDS FOR MODULE
Bind.factory<IUserRepository>((i) => UserRepository()),
];
}
Injecting a Dependency Globally
Simply place your binds in your AppModule.
Your AppModule will never be disposed of.
class AppModule extends Module {
@override
List<Bind<Object>> get binds => [
Bind.singleton<AuthController>((i) => AuthController()), // DEFINE GLOBAL BINDS IN APP_MODULE
];
}
Retrieve a Bind
To retrieve a bind, we have three options:
final homeController = context.read<HomeController>();
// or
final homeController = Modular.get<HomeController>();
// or
final homeController = Bind.get<HomeController>();
Routes 🛣️
Route control is done by our beloved go_router. The only thing that changes is that we leave the route configurations for the module to use ChildRoute, it will have the same structure as GoRoute, you can find an example below. You can follow the go_router documentation for navigation. open go_router documentation
The ChildRoute() is equivalent to GoRoute(). You may notice that they will have the same parameters.
Note that every initial route of your module must start with "/" only.
ChildRoutes
class HomeModule extends Module {
@override
List<ModularRoute> get routes => [
ChildRoute('/', name: "home", builder: (context, state) => const HomePage()), // define routes
ChildRoute('/config', name: "config", builder: (context, state) => const ConfigPage()),
ChildRoute('/info_product/:id', name: "info_product", builder: (context, state) => const InfoProductPage(id: state.pathParameters['id']!)),
];
}
Your module can also have submodules.
Note that whenever a route calls the module, it will fall into the module's "/" route.
class AppModule extends Module {
@override
List<ModularRoute> get routes => [ // define modules
ModuleRoute("/", module: HomeModule()),
ModuleRoute("/user", module: UserModule()),
ChildRoute('/splash', name: "splash", builder: (context, state) => const SplashPage()),
];
}
ShellRoutes
ShellModularRoute would be the equivalent of FLutter Modular's RouteOutlet With it you can have a navigation window within a page. It is widely used in menu construction, where you change the options and only the screen changes.
Here's the doc if you want to go deeper > open go_router ShellRoute documentation
class HomeShellModule extends Module {
@override
List<ModularRoute> get routes => [
ShellModularRoute(builder: (context, state, child) => ShellPageExample(shellChild: child), routes:[
ChildRoute("/config", child: (context, state) => const ConfigPage()),
ChildRoute("/user", child: (context, state) => const UserPage()),
ChildRoute("/orders", child: (context, state) => const OrdersPage()),
],
),
];
}
ShellPageExample
class ShellPageExample extends StatefulWidget {
final Widget shellChild; // Request a child WIDGET to be rendered in the shell
const ShellPageExample({super.key, required this.shellChild});
@override
State<ShellPageExample> createState() => _ShellPageExampleState();
}
class _ShellPageExampleState extends State<ShellPageExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
Expanded(child: widget.shellChild), // Your routes will be re-rendered here
Row(
children: [
IconButton(
onPressed: () {
context.go("/home");
},
icon: const Icon(Icons.home)),
IconButton(
onPressed: () {
context.go("/config");
},
icon: const Icon(Icons.settings)),
],
),
]),
);
}
}
Go directly to a destination example
Navigating to a destination in GoRouter will replace the current stack of screens with the screens configured to be displayed for the destination route. To change to a new screen, call context.go() with a URL:
build(BuildContext context) {
return TextButton(
onPressed: () => context.go('/users/123'),
);
}
This is shorthand for calling GoRouter.of(context).go('/users/123).
To build a URI with query parameters, you can use the Uri class from the Dart standard library:
context.go(Uri(path: '/users/123', queryParameters: {'filter': 'abc'}).toString());
For a more complete example go to open go_router documentation
Contributions
Made with contrib.rocks.