Skip to content

Instantly share code, notes, and snippets.

@ProZhar
Forked from eduardoflorence/main.dart
Created February 18, 2023 13:17
Show Gist options
  • Save ProZhar/9794e3de8c7f0c666c304cd3f1a7033a to your computer and use it in GitHub Desktop.
Save ProZhar/9794e3de8c7f0c666c304cd3f1a7033a to your computer and use it in GitHub Desktop.
Flutter Modular with pushNamed/pushReplacementNamed and RouterOutlet
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
void main() {
runApp(ModularApp(module: AppModule(), child: AppWidget()));
}
class AppModule extends Module {
@override
List<ModularRoute> get routes => [
ChildRoute('/', child: (_, __) => HomePage()),
ModuleRoute('/products', module: ProductsModule(), transition: TransitionType.noTransition),
];
}
class AppWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
Modular.to.addListener(() {
print('Navigate: ${Modular.to.path}');
print('History: ${Modular.to.navigateHistory.map((e) => e.name)}');
});
return MaterialApp.router(
routeInformationParser: Modular.routeInformationParser,
routerDelegate: Modular.routerDelegate,
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home')),
body: Center(
child: ElevatedButton(
child: const Text('Go Products'),
// navigate to module only
onPressed: () async {
await Modular.to.pushNamed('/products/');
},
),
),
);
}
}
class ProductsModule extends Module {
@override
List<ModularRoute> get routes => [
ChildRoute('/', child: (_, __) => ProductsPage(), children: [
ChildRoute('/red', child: (_, __) => Container(color: Colors.red)),
ChildRoute('/yellow', child: (_, __) => Container(color: Colors.yellow)),
ChildRoute('/green', child: (_, __) => Container(color: Colors.green)),
])
];
}
class ProductsPage extends StatefulWidget {
@override
State<ProductsPage> createState() => _ProductsPageState();
}
class _ProductsPageState extends State<ProductsPage> {
@override
void initState() {
super.initState();
// Set the initial route inside the module
Modular.to.pushNamed('./red');
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
// Returns to root product module before pop
Modular.to.pushReplacementNamed('./');
return true;
},
child: Scaffold(
appBar: AppBar(title: const Text('Products')),
body: NavigationListener(builder: (context, child) {
return Row(
children: [
SizedBox(
width: 100,
child: Column(children: [
ListTile(
title: const Text('Red'),
onTap: () => Modular.to.pushReplacementNamed('./red'),
selected: Modular.to.path.endsWith('/red'),
),
ListTile(
title: const Text('Yellow'),
onTap: () => Modular.to.pushReplacementNamed('./yellow'),
selected: Modular.to.path.endsWith('/yellow'),
),
ListTile(
title: const Text('Green'),
onTap: () => Modular.to.pushReplacementNamed('./green'),
selected: Modular.to.path.endsWith('/green'),
),
]),
),
const Expanded(child: RouterOutlet())
],
);
}),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment