Extract routes into separate dart files

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.

1. 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(),
};

2. Then call it in MyApp using ... Spread Operator

routes: {
          ...routes_puasa,
          ...route_tarawih,
          ...routes_tarawih20,
          ...routes_zakat,
          
          }

Works perfectly!