在背景图像之前推送路线时，Flutter白色闪烁

Question

在我的flutter应用程序中，启动屏幕动画完成后，它会推送到HomeRoute。

HomeRoute有一个backgropundImage，用于覆盖整个屏幕：

主页路线。dart:

@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/mainBgndsmall.png"),
fit: BoxFit.cover)),
child: SafeArea(child: _buildBody())),
);
}

当推送路线时，在显示背景图像之前会出现白色闪烁。

这是正常的行为吗？还是我在尝试将图像作为背景时做错了什么？

图像大小约为500KB或600KB。PNG图像。

Answer 1

图像尚未加载，这就是为什么容器在图像出现之前加载

你可以使用未来的构建器来修复它，它将显示一个循环进度指示器，直到图像加载并准备好呈现

Answer 2

您可以在didChangeDependencies方法中使用precheckImage，以增加在显示小部件之前加载图像的机会，防止白色闪烁。

@override
void didChangeDependencies() {
super.didChangeDependencies();
precacheImage(const AssetImage("assets/images/mainBgndsmall.png"), context);
}

您可能需要先将小部件转换为StatefulWidget，以便传递BuildContext。

Answer 3

这是因为正在加载图像。或者，您可以使用FutureBuilder Widget在图像加载时处理图像这里是的例子

...
///future type variable to keep value from future method
late Future<String> futureData;
///future method to fetch some data
Future<String> getData(){
///give some duration before return value
await Future.delayed(Duration(seconds: 1));

//some code if you have some code
// ....
///return string
return "oke";
}
@override
didChangeDependencies(){
super.didChangeDependencies();
futureData = getData();
}
@override
Widget build(BuildContext context){
Future.delayed(Duration(seconds: 1));
return Scaffold(
body: FutureBuilder<String>(
future: futureData,
builder:(context, snapshot) {
///if loading is done
if(snapshot.connectionState == ConnectionState.done){
// if future success
if(snapshot.hasData){
///return widget what you want to show
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/mainBgndsmall.png"),
fit: BoxFit.cover)),
child: SafeArea(
child: _buildBody()
)
);
}else{
// if future failed return some widget 
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(
child: Text("Image can't load"),
)
);
}
}
///return progress loading
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(
child: CircularProgressIndicator(),
)
);
},
),
);
}

Answer 4

到目前为止，它被认为是flutter框架错误。你可以在这里查看。它也在Github中公开发行。

你可以做一件事，你可以使用cached_network_image。加载图像时，显示您自己的容器或您想要的任何内容。