Flutter- Small Size & Simple local Image loading very slowly

234 Views Asked by At

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-

  1. 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-

  1. Reducing the size of each imageto <130kb
  2. Reducing the dimensions of image
  3. Installing the release version of this (flutter run --release). Definitely speeds up the things but doesnt help with the issue I am facing
  4. Precaching (doesn't work either)
  5. 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

My flutter installation configuration- enter image description here

0

There are 0 best solutions below