flutter 未来制造商扰乱MaterialApp路线导航

irlmq6kh  于 2022-11-30  发布在  Flutter
关注(0)|答案(1)|浏览(158)

下面是我的主要代码:

void main() {
  setPathUrlStrategy();
  runApp(
    FutureBuilder(
      future: Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
      ),
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.done:
            return MaterialApp(
              builder: (context, child) => ResponsiveWrapper.builder(child,
                  maxWidth: 3000,
                  minWidth: 350,
                  defaultScale: true,
                  breakpoints: [
                    const ResponsiveBreakpoint.resize(350, name: MOBILE),
                    const ResponsiveBreakpoint.autoScale(600, name: TABLET),
                    const ResponsiveBreakpoint.resize(800, name: DESKTOP),
                    const ResponsiveBreakpoint.resize(850, name: 'D2'),
                    const ResponsiveBreakpoint.resize(1170, name: 'L'),
                    const ResponsiveBreakpoint.resize(1370, name: 'L2'),
                    const ResponsiveBreakpoint.autoScale(1700, name: 'XL'),
                  ],
                  background: Container(color: const Color(0xFFF5F5F5))),
              debugShowCheckedModeBanner: false,
              title: '360 Flight Management',
              color: const Color(0x515b8faf),
              theme:
                  ThemeData(scaffoldBackgroundColor: const Color(0xFFFFFFFF)),
              initialRoute: '/',
              routes: {
                // When navigating to the "/" route, build the FirstScreen widget.
                '/': (context) => const MyApp(),

                '/admin': (context) => const AdminView(),
              },
              onUnknownRoute: (settings) {
                return MaterialPageRoute(builder: (_) => const PageNotFound());
              },
            );
          default:
            return MaterialApp(
              home: Dialog(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      CircularProgressIndicator(color: Color(0xff4987af),),
                      SizedBox(height: 20),
                      Text("Loading"),
                    ],
                  ),
                ),
              ),
            );
        }
      },
    ),
  );
}

class AdminView extends StatefulWidget {
  const AdminView({Key? key}) : super(key: key);

  @override
  State<AdminView> createState() => _AdminViewState();
}

class _AdminViewState extends State<AdminView> {

  bool isLoggedIn = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          if (isLoggedIn) ...[
            //Show dashboard
            Text('Dashboard')
          ] else ...[
            //Login
            Text('Login')
          ]
        ],
      ),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: const [
          Text('MY HOME SCREEN')
        ],
      ),
    );
  }
}

我尝试转到localhost:#####/admin,它将我发送回初始路由localhost:#####,并显示错误:

======== Exception caught by Flutter framework =====================================================
The following message was thrown:
Could not navigate to initial route.
The requested route name was: "/admin"
There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead.

====================================================================================================

我还尝试将MaterialApp下的initialRoute字段设置为/admin,这会将我发送到管理页面,但如果我从URL中删除/admin,我将无法返回主页。
如果您有任何问题,请提出。
编辑:我想我已经想到了一个解决方案,虽然我现在不能测试它。
我最近把FutureBuilder小部件移出了MyApp类,因为它导致了滚动条的问题,但我现在认为它导致了MaterialApp的问题。我认为最好的解决方案是创建一个闪屏并调用FutureBuilder,然后在其中调用MyApp。

des4xlb0

des4xlb01#

我最后用一种有趣的方式来调用它,这种方式可能不是很有效,但似乎很有效:

void main() {
  setPathUrlStrategy();
  runApp(
    MaterialApp(
      builder: (context, child) => ResponsiveWrapper.builder(child,
          maxWidth: 3000,
          minWidth: 350,
          defaultScale: true,
          breakpoints: [
            const ResponsiveBreakpoint.resize(350, name: MOBILE),
            const ResponsiveBreakpoint.autoScale(600, name: TABLET),
            const ResponsiveBreakpoint.resize(800, name: DESKTOP),
            const ResponsiveBreakpoint.resize(850, name: 'D2'),
            const ResponsiveBreakpoint.resize(1170, name: 'L'),
            const ResponsiveBreakpoint.resize(1370, name: 'L2'),
            const ResponsiveBreakpoint.autoScale(1700, name: 'XL'),
          ],
          background: Container(color: const Color(0xFFF5F5F5))),
      debugShowCheckedModeBanner: false,
      title: '360 Flight Management',
      color: const Color(0x515b8faf),
      theme: ThemeData(scaffoldBackgroundColor: const Color(0xFFFFFFFF)),
      initialRoute: '/',
      routes: {
        // When navigating to the "/" route, build the FirstScreen widget.
        '/': (context) => const MyApp(),

        '/admin': (context) => const AdminView(),
      },
      onUnknownRoute: (settings) {
        return MaterialPageRoute(builder: (_) => const PageNotFound());
      },
    ),
  );
}

在每个视图中,我使用this answer中的代码在两个视图中调用Firebase的初始化。对于这个应用程序,我只有两个路径,因此可以很容易地单独调用初始化,但我希望找到一个更好的解决方案,因为我的应用程序在未来将包含不止两个视图。

相关问题