How to create full screen dialog in flutter when I am using root names to Navigate?

Question

This is the sample code using rootName but here I am not able to use MaterialPageRoute to get the fullScreenDialog property.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        '/under-development': (context) => UnderDevelopment(),
        '/profile1': (context) => Profile1()
      },
      title: appName,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: primaryColor,
          accentColor: secondaryColor,
          fontFamily: 'Poppins'),
    );
  }
}

Navigator

onTap: () {
    Navigator.pushNamed(context, '/profile1');
},

Solution 1

You can use something like this inside Material App. I hope it helps.

onGenerateRoute: (RouteSettings settings) {
        List<String> pathElements = settings.name.split("/");
        if (pathElements[0] != "") return null;
        switch (pathElements[1]) {
          case "home":
          String userID = pathElements[2];  
            return MaterialPageRoute(
        builder: (context) => ReportsPage(
              userID: userID,
            ),fullscreenDialog: true);

        }
      },

Solution 2

new MaterialApp(
    title: 'Named Routes Demo', 
    theme: ThemeData(
    primarySwatch: Colors.green), 
    initialRoute: '/', 
    onGenerateRoute: (RouteSettings settings) {
      List<String> pathElements = settings.name.split("/");
      if (pathElements[0] != "") return null;
      switch (pathElements[1]) {
        case "":
          return MaterialPageRoute(
              builder: (context) => FirstScreen());
        case "second":
          return MaterialPageRoute(
              builder: (context) => SecondScreen(), fullscreenDialog: true);
        case "third":
          return MaterialPageRoute(
              builder: (context) => ThirdScreen(), fullscreenDialog: true);
    }
  },
)

Navigator Button

onTap: () {
    Navigator.pushNamed(context, '/second');
},