Я сделал простой виджет с индикатором выполнения из 10 шагов. Когда я нажимаю кнопку, этот индикатор выполнения увеличивается:
class SoundBarWidget extends StatefulWidget {
SoundBarWidget({
Key key,
this.height,
this.level,
}) : super(key: key);
double height;
double level = 0;
@override
_SoundBarWidgetState createState() => _SoundBarWidgetState();
}
class _SoundBarWidgetState extends State<SoundBarWidget> {
double barHeight() {
return widget.height == null
? DEFAULT_SOUNDBAR_HEIGHT
: (widget.height > 0 ? widget.height : DEFAULT_SOUNDBAR_HEIGHT);
}
@override
Widget build(BuildContext context) {
Widget w;
if (widget.level == null) {
widget.level = 50;
}
if (widget.level > 90) {
w = Image.asset('soundbar11.png', height: barHeight());
} else if (widget.level > 80) {
w = Image.asset('soundbar10.png', height: barHeight());
} else if (widget.level > 70) {
w = Image.asset('soundbar9.png', height: barHeight());
} else if (widget.level > 60) {
w = Image.asset('soundbar8.png', height: barHeight());
} else if (widget.level > 50) {
w = Image.asset('soundbar7.png', height: barHeight());
} else if (widget.level > 40) {
w = Image.asset('soundbar6.png', height: barHeight());
} else if (widget.level > 30) {
w = Image.asset('soundbar5.png', height: barHeight());
} else if (widget.level > 20) {
w = Image.asset('soundbar4.png', height: barHeight());
} else if (widget.level > 10) {
w = Image.asset('soundbar3.png', height: barHeight());
} else if (widget.level > 0) {
w = Image.asset('soundbar2.png', height: barHeight());
} else {
w = Image.asset('soundbar1.png', height: barHeight());
}
return w;
}
}
Проблема в том, что при первой загрузке нового .png Flutter отображает пустой контейнер в течение нескольких миллисекунд. Итак, что происходит, так это то, что индикатор выполнения немного скачет. Это происходит только при первой загрузке каждого файла .png. Когда этот png повторно отображается, этого не происходит, поэтому я предполагаю, что это как-то связано с тем, что изображение не находится в кеше.
Итак, как мне загрузить / кэшировать флаттерные изображения .png перед их использованием?
Функция precacheImage
специально предназначена для загрузки изображения до того, как оно будет нарисовано:
List<String> _images = ['soundbar1.png', 'soundbar2.png', 'soundbar3.png'];
@override
void initState() {
super.initState();
Future.delayed(Duration.zero, () {
this._loadImages();
});
}
Future<void> _loadImages() async {
_images.forEach((image) async {
await precacheImage(AssetImage(image));
});
}
Подробнее об этом можно прочитать в официальной документации
Рад был помочь! Пожалуйста, не забудьте выбрать ответ как правильный - я отредактировал ответ, чтобы решить проблему
Спасибо. Это дает ошибку, исправленную stackoverflow.com/a/56401330