Flutter本地小尺寸图片加载缓慢且闪烁问题求助
图片加载慢且闪烁的Flutter优化问题
我将一批单张大小<130kb、宽度800、高度500-600的.jpg图片存储在assets/category_images目录中,在Flutter应用中加载时每张图片需要1-2秒,还会出现闪烁效果,严重影响应用体验。参考Stack Overflow方案尝试了图片预缓存,但毫无效果。以下是我的部分实现代码:
1. main.dart的build函数
Widget build(BuildContext context) { precacheImage(AssetImage("assets/category_images/motivation.jpg"), context); precacheImage(AssetImage("assets/category_images/courage.jpg"), context); //省略大量precacheImage语句以简化代码 SystemChrome.setEnabledSystemUIOverlays([]); return MultiProvider( providers: [ ListenableProvider<Quotes_DataProvider>(create: (context) => Quotes_DataProvider()), ListenableProvider<searchQuote_DataProvider>(create: (context) => searchQuote_DataProvider()), ], child: MaterialApp( theme:ThemeData(backgroundColor: Color.fromARGB(255, 234, 234, 234)), home:WelcomeScreen(), routes: { '/favourites': (context) => favouriteScreen(), '/quotes': (context) => QuoteDisplayScreen(), '/categories':(context)=> CategoryScreen(), }, ), ); } }
2. FeaturedQuoteCategory.dart
class _FeaturedQuoteCategoryState extends State<FeaturedQuoteCategory> { late final ImageProvider image; @override void initState() { super.initState(); image = AssetImage(widget.imageLocation); } Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Stack( children: [ ClipRRect( borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)), child: Image(image:image, fit: BoxFit.cover, width: double.infinity, height: 120, //gaplessPlayback: true, ), ), ) , //backgroundColor: Color.fromARGB(255, 30, 30, 30) ], ), ], ); } }
组件使用方式
FeaturedQuoteCategory(title: "Life Quotes", imageLocation: "assets/category_images/life.jpg",subject: "life",),
通过参数传递图片路径。
已尝试的解决方案
- 将每张图片大小压缩至<130kb
- 缩小图片尺寸
- 运行release版本(
flutter run --release),虽有提速但未解决核心问题 - 图片预缓存(无效)
该问题已困扰我2天,恳请各位提供技术帮助。我的Flutter配置信息见下图:
内容的提问来源于stack exchange,提问作者Akshit Sharma
相关产品推荐
相关产品推荐

