Welcome to Stack Overflow! If I understand your question correctly, you are currently defining your routes using the routes parameter similar to this:
MaterialApp(
routes: {
'/01-01': (context) {
return Scaffold(
appBar: AppBar(
title: const Text('01 JAN'),
),
);
},
'/02-01': (context) {
return Scaffold(
appBar: AppBar(
title: const Text('02 JAN),
),
);
},
},
)
Instead of defining each route manually, you could investigate using the new Navigator 2.0 changes to easily read parameters from the URL similar to this:
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatefulWidget {
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
final _routeInformationParser = AppRouteInformationParser();
final _routerStateData = RouterStateData();
late AppRouterDelegate _routerDelegate;
@override
Widget build(BuildContext context) {
return RouterState(
notifier: _routerStateData,
child: MaterialApp.router(
routeInformationParser: _routeInformationParser,
routerDelegate: _routerDelegate,
),
);
}
@override
void dispose() {
_routerDelegate.dispose();
_routerStateData.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
_routerDelegate = AppRouterDelegate(
routerStateData: _routerStateData,
);
}
}
/// https://api.flutter.dev/flutter/widgets/InheritedNotifier-class.html
class RouterState extends InheritedNotifier<RouterStateData> {
const RouterState({
Key? key,
RouterStateData? notifier,
required Widget child,
}) : super(
key: key,
notifier: notifier,
child: child,
);
static RouterStateData? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<RouterState>()?.notifier;
}
}
/// https://api.flutter.dev/flutter/foundation/ChangeNotifier-class.html
class RouterStateData extends ChangeNotifier {
/// The devotion day.
int? _devotionDay;
/// The devotion month.
int? _devotionMonth;
/// Gets the devotion day.
int? get devotionDay => _devotionDay;
/// Gets the devotion month.
int? get devotionMonth => _devotionMonth;
/// Updates the state of the router to a devotion day and a devotion month.
void setDevotionDayMonth(int? devotionDay, int? devotionMonth) {
_devotionDay = devotionDay;
_devotionMonth = devotionMonth;
notifyListeners();
}
}
/// A base route path that all route paths can extend from.
abstract class RoutePath {
const RoutePath();
}
/// The route path of the home.
class HomeRoutePath extends RoutePath {
const HomeRoutePath();
}
/// The route path of a devotion.
class DevotionRoutePath extends RoutePath {
/// The day of the devotion.
final int day;
/// The month of the devotion.
final int month;
const DevotionRoutePath({
required this.day,
required this.month,
});
}
/// https://api.flutter.dev/flutter/widgets/RouteInformationParser-class.html
class AppRouteInformationParser extends RouteInformationParser<RoutePath> {
@override
Future<RoutePath> parseRouteInformation(
RouteInformation routeInformation,
) async {
/// Gets the uri of the route, for example "/devotions/01-01".
final uri = Uri.parse(routeInformation.location!);
/// Switches on the number of path segments of the uri.
switch (uri.pathSegments.length) {
/// Cases on uris that have 2 path segments, for example "/devotions/1-1".
case 2:
/// Switches on the value of the first path segment of the uri.
switch (uri.pathSegments[0]) {
/// Cases on uris that start with devotions, for example "/devotions/1-1".
case 'devotions':
/// Gets the day and month dynamically from the uri.
final dayMonth = uri.pathSegments[1].split('-');
/// Returns the devotion route path with the day and month from the uri.
return SynchronousFuture(
DevotionRoutePath(
day: int.parse(dayMonth[0]),
month: int.parse(dayMonth[1]),
),
);
}
break;
}
/// Returns the default home route path if no other route paths match the uri.
return SynchronousFuture(HomeRoutePath());
}
@override
RouteInformation? restoreRouteInformation(
RoutePath configuration,
) {
/// If the current route path is home, then sets the uri to /.
if (configuration is HomeRoutePath) {
return RouteInformation(
location: '/',
);
/// If the current route path is devotion, then sets the uri to /devotions/day-month, for example "/devotions/1-1".
} else if (configuration is DevotionRoutePath) {
return RouteInformation(
location: '/devotions/${configuration.day}-${configuration.month}',
);
}
return null;
}
}
/// https://api.flutter.dev/flutter/widgets/RouterDelegate-class.html
class AppRouterDelegate extends RouterDelegate<RoutePath>
with ChangeNotifier, PopNavigatorRouterDelegateMixin<RoutePath> {
@override
final navigatorKey = GlobalKey<NavigatorState>();
final RouterStateData routerStateData;
AppRouterDelegate({
required this.routerStateData,
}) {
routerStateData.addListener(notifyListeners);
}
@override
RoutePath? get currentConfiguration {
final day = routerStateData.devotionDay;
final month = routerStateData.devotionMonth;
/// If both the day and the month are not null, then returns the route path for devotion; otherwise, returns the route path for home.
return day != null && month != null
? DevotionRoutePath(day: day, month: month)
: HomeRoutePath();
}
@override
Widget build(BuildContext context) {
final day = routerStateData.devotionDay;
final month = routerStateData.devotionMonth;
return Navigator(
key: navigatorKey,
pages: [
/// Pushes the home page onto the navigator stack.
const MaterialPage<void>(
child: HomePage(),
key: ValueKey('home_page'),
),
/// If both the day and the month are not null, then pushes the devotion page onto the navigator stack.
if (day != null && month != null)
MaterialPage<void>(
child: DevotionPage(
day: day,
month: month,
),
key: ValueKey('devotion_page'),
),
],
onPopPage: (route, result) {
if (!route.didPop(result)) {
return false;
}
/// If the devotion page is being popped, then clears the devotion day and devotion month from the router state.
routerStateData.setDevotionDayMonth(null, null);
return true;
},
);
}
@override
void dispose() {
routerStateData.removeListener(notifyListeners);
super.dispose();
}
@override
Future<void> setNewRoutePath(RoutePath configuration) async {
/// If the route path is home, then clears the devotion day and devotion month from the router state.
if (configuration is HomeRoutePath) {
routerStateData.setDevotionDayMonth(
null,
null,
);
/// If the route path is devotion, then sets the devotion day and devotion month in the router state.
} else if (configuration is DevotionRoutePath) {
routerStateData.setDevotionDayMonth(
configuration.day,
configuration.month,
);
}
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _dayController = TextEditingController();
final _monthController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: ListView(
children: [
TextFormField(
controller: _dayController,
decoration: InputDecoration(
labelText: 'Day',
hintText: '01',
),
),
TextFormField(
controller: _monthController,
decoration: InputDecoration(
labelText: 'Month',
hintText: '01',
),
),
ElevatedButton(
onPressed: () {
/// Updates the router state with the entered devotion day and devotion month. This calls the `notifyListeners()` internally, which notifies the `AppRouterDelegate` that the route needs updating.
RouterState.of(context)?.setDevotionDayMonth(
int.parse(_dayController.text),
int.parse(_monthController.text),
);
},
child: Text('GO TO DEVOTION'),
),
],
),
);
}
@override
void dispose() {
_dayController.dispose();
_monthController.dispose();
super.dispose();
}
}
class DevotionPage extends StatelessWidget {
final int day;
final int month;
const DevotionPage({
Key? key,
required this.day,
required this.month,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Devotion'),
),
body: Center(
child: Text('$day-$month'),
),
);
}
}
Please note this is by no means the only solution and others can be found here and here.
If you have any questions, then please do let me know!
