Future builder把MaterialApp的路由导航搞砸了

Question

这是我的主要代码的问题:

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。

Answer 1

我最终以一种有趣的方式调用它，可能不是很有效，但似乎有效:

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

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