Extract routes into separate dart files - flutter

Question

I have a list of routes with more than 50 lines and I wish to simplify it because it is very long and messy. Below is the example of current routes. Is there anyway I can extract it into separate files? For example, put //2 in routes2.dart file and //3 in routes3.dart file? How do I call them back in MyApp?
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider( create: (_) => SettingsNotifier()),
ChangeNotifierProvider(create: (_) => InterstitialTimerNotifier()),
ChangeNotifierProvider(create: (_) => InterstitialReadyNotifier()),
ChangeNotifierProvider(create: (_) => PolicyNotifier()),
],
child: MaterialApp(
themeMode:ThemeMode.system,
theme: ThemeClass.lightTheme,
darkTheme: ThemeClass.darkTheme,
initialRoute: HomeScreen.id,
routes: {
//1. Home
HomeScreen.id: (context) => HomeScreen(),
//2. Puasa
PuasaScreen.id: (context) => PuasaScreen(),
DoaBerbuka.id: (context) => DoaBerbuka(),
NiatPuasa.id: (context) => NiatPuasa(),
WaktuMustajabDoa.id: (context) => WaktuMustajabDoa(),
PuasaPengenalanScreen.id: (context) => PuasaPengenalanScreen(),
PuasaReference.id: (context) => PuasaReference(),
//3. Solat Tarawih
TarawihScreen.id: (context) => TarawihScreen(),
TarawihPengenalanScreen.id: (context) => TarawihPengenalanScreen(),
TarawihNiat.id:(context) => TarawihNiat(),
TarawihTakrif.id: (context) => TarawihTakrif(),
TarawihDalilScreen.id: (context) => TarawihDalilScreen(),
TarawihHukum.id: (context) => TarawihHukum(),
TarawihReference.id: (context) => TarawihReference(),
TarawihWaktuSolat.id: (context) => TarawihWaktuSolat(),
TarawihKelebihanScreen.id: (context) => TarawihKelebihanScreen(),
TarawihBilanganRakaat.id: (context) => TarawihBilanganRakaat(),
Tarawih8Screen.id: (context) => Tarawih8Screen(),
Tarawih8TatacaraScreen.id: (context) => Tarawih8TatacaraScreen(),
//4. Solat Witir
Tarawih8WitirScreen.id: (context) => Tarawih8WitirScreen(),
Tarawih8WitirRakaat1.id: (context) => Tarawih8WitirRakaat1(),
Tarawih8WitirRakaat2.id: (context) => Tarawih8WitirRakaat2(),
Tarawih8WitirRakaat3.id: (context) => Tarawih8WitirRakaat3(),
TarawihTahlil.id: (context) => TarawihTahlil(),
//There're more routes after this
}),
);
}
}

Answer 1

routes: takes Map<String, WidgetBuilder>, you can create
a dart file and create a map like,
final Map<String, WidgetBuilder> route2 = {
PuasaScreen.id: (context) => PuasaScreen(),
.....
};
same goes for routes3.dart.
and you can add theses routes on MaterialApp like
return MaterialApp(
routes: {
HomeScreen.id: (context) => HomeScreen(),
...route2, /// variable name
...route3,
},
);

Answer 2

This is the updated code after applying suggestions from #OMiShah.
I created new dart files for the routes. For example, route_puasa.dart:
import ...
Map routes_puasa = {
PuasaScreen.id: (context) => PuasaScreen(),
DoaBerbuka.id: (context) => DoaBerbuka(),
NiatPuasa.id: (context) => NiatPuasa(),
WaktuMustajabDoa.id: (context) => WaktuMustajabDoa(),
PuasaPengenalanScreen.id: (context) => PuasaPengenalanScreen(),
PuasaReference.id: (context) => PuasaReference(),
};
Then call it in MyApp using ... Spread Operator
routes: {
...routes_puasa,
...route_tarawih,
...routes_tarawih20,
...routes_zakat,
}
Works perfectly!