當我使用根名稱導航時，如何在Flutter中創建全屏對話框？

Question

這是使用rootName的示例代碼，但是在這里，我無法使用MaterialPageRoute來獲取fullScreenDialog屬性。

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'),
    );
  }
}

航海家

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

Answer 1

您可以在Material App中使用類似的方法。 希望對您有所幫助。

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);

        }
      },

Answer 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);
    }
  },
)

導航按鈕

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