I have a bunch of these .jpg images (each having a size <130 kb) with a width of 800 and height within 500-600 stored in assets/categeory_images in folder which I am trying to load in my app. But it is taking 1-2 seconds for each of the image to load and thus producing the flickering effect which is completely ruining the feel of app
I have tried precaching image following the accepted answer of Very simple image loaded pretty slow with Flutter , however it doesn't seem to help at all. Below is part of my implementation-
- In main.dart file (build function)-
Widget build(BuildContext context) {
precacheImage(AssetImage("assets/category_images/motivation.jpg"), context);
precacheImage(AssetImage("assets/category_images/courage.jpg"), context);
//Eliminated many of the precacheImage() statements so as to keep this function short
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(),
},
),
);
}
}
And my 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)
],
),
],
);
}
}
As I have manually excluded un-necessary part from the above snippet, there may be missing colons/brackets. Apologizes for that.
I am displaying the widget via-
FeaturedQuoteCategory(title: "Life Quotes", imageLocation: "assets/category_images/life.jpg",subject: "life",),
Basically I am passing the image Location as argument to the widget
What I have tried-
- Reducing the size of each imageto <130kb
- Reducing the dimensions of image
- Installing the release version of this (
flutter run --release). Definitely speeds up the things but doesnt help with the issue I am facing - Precaching (doesn't work either)
- Crying (helps lessen the pain but doesn't solve the issue)
Stuck on this issue since last 2 days. Any help would be greatly appreciated
