加载一条路线，然后通过导航器在颤动中推动它

Question

我目前正在尝试在flutter中推送一条命名路由。

到目前为止效果不错，但背景的资产图像是在通过Navigator推送路线后加载的，这看起来不太好。

目前我推的路线是这样的：

@override
void initState() {
super.initState();
Timer(Duration(seconds: 5), () =>
Navigator.pushNamed(context, routeToPage2)
);
}

是否有任何方法可以在不首先推送页面/路由的情况下加载页面/路由，以便在设定时间后推送路由时，所有内容都能正确构建？

Answer 1

我猜资产映像已加载到routeToPage2上？在这种情况下，每次加载图像之前都会进行推送。

Answer 2

您可以使用routegenerator进行页面路由和popUntil。此行为将从堆栈中删除现有页面，并在上推送一个名为主页的页面。MaterialPageRoute构建推送到导航器的路由。将您的资产加载到主页的脚手架中。呈现不需要延迟

Navigator.of(context)
.popUntil(ModalRoute.withName(RouteGenerator.homePage));

class RouteGenerator {
static const String homePage = "/home";
static const String customPage = "/custom";
RouteGenerator._();
static Route<dynamic> handleRoute(RouteSettings routeSettings) {
Widget childWidget;
switch (routeSettings.name) {
case homePage:
{
childWidget = HomePageWidget(title: 'Home Page');
}
break;
case customPage:
{
final args = routeSettings.arguments as CustomView;
childWidget = CustomPageWidget(args);
}
break;
default:
throw FormatException("Route Not Found");
}
return MaterialPageRoute(builder: (context) => childWidget);
}
}

Answer 3

很抱歉说得有点含糊，也许我应该更详细地解释我的问题。所以基本上我有Page1，它在定时器完成后推送到Page2。

在Page2上，我有一个图像资产，它在Page2显示后不久加载，看起来不太好。此资产保存在设备上。

我想以某种方式在后台加载Page2，而Page1仍在向用户显示，因此Page2的背景图像不会在页面显示后弹出。

但我已经为自己找到了解决问题的合适办法。我在第1页使用以下代码：

late Image backgroundImage;
@override
void initState() {
super.initState();
backgroundImage = Image.asset("path to image");
Timer(Duration(seconds: 5),
() => Navigator.pushReplacementNamed(context, page2));
}
@override
void didChangeDependencies(){
super.didChangeDependencies();
precacheImage(backgroundImage.image, context);
}

这导致在显示Page1时预加载图像，因此在向用户显示Page2后不会弹出背景图像。