Stuck in loadingBuilder?

[large]

Thank you for sharing this great class! I have been using it on my app recently and it has worked fine most of the time.

Sometimes when you lay the app in the background and take it into front, the loadingBuilder() is called and I uses a greybox and it is stuck dere. I have to force setState() to make it show the picture. Is this something you have observered?

[CHRISTOPANANJICKAL]

Thanks for you feedback. Ill check and update.

[large]

As you can see in these two pictures, the grey square is there after reopening the app.

If I press the dropdown each picture is loaded as expected. When closing dropdown the gray square is still there. After maybe 5-10s the picture shows as expected. Cacheissue maybe?

[CHRISTOPANANJICKAL]

Can you share the code snippet?

[large]

Strange part is that sometimes it works fine. Could it be that it waits for reply from http or something? Even it has the picture cached... Dropdown is part of a bigger project, but here is how the data is loaded:

Init:

  void initState() async
  {
    var directory = await getApplicationDocumentsDirectory();
    var folderDirectory = Directory('${directory.path}/cached_images/');
    await FastCachedImageConfig.init(
        path: folderDirectory.path, clearCacheAfter: const Duration(days: 7));
  }

Drop down:

      FutureBuilder<List<CountryModel>>(
          future: _snatchCountry,
          builder: (context, snap) {

            //No love if the data isn't available yet
            if (!snap.hasData ||
                snap.connectionState == ConnectionState.active ||
                snap.connectionState == ConnectionState.waiting) {
              return const Center(
                child: SizedBox(height: 50,child: CircularProgressIndicator()),
              );
            }

            //Return the love
            return Container(
              child: DropdownButton<CountryModel>(
                iconSize: 0.0,
                value: selectedCountry,
                isExpanded: true,
                elevation: 16,
                underline: const SizedBox(),
                dropdownColor: Theme.of(context).primaryColor,
                alignment: AlignmentDirectional.center,
                style: Theme.of(context).textTheme.bodyText1,
                items: snap.data?.map((CountryModel country) {
                  return DropdownMenuItem<CountryModel>(
                    value: country,
                    alignment: AlignmentDirectional.center,
                    child:
                    SizedBox(
                      width: 52,
                      height: 35,
                      child: 
                      FastCachedImage(
                        url: "https://${widget.endPoint}/${country.flagImage!}",
                        fit: BoxFit.cover,
                        fadeInDuration: const Duration(milliseconds: 0),
                        errorBuilder: (context, exception, stacktrace) {
                          return Text(exception.toString());
                        },
                        loadingBuilder: (context) {
                          return Container(color: Colors.grey);
                        },
                      ),
                    )
                  );
                }).toList(),
                onChanged: onStateChange,
              ),
            );
          });

[CHRISTOPANANJICKAL]

Please try moving this code from the init to the main function.

var directory = await getApplicationDocumentsDirectory(); var folderDirectory = Directory('${directory.path}/cached_images/'); await FastCachedImageConfig.init( path: folderDirectory.path, clearCacheAfter: const Duration(days: 7));

You must not use this code anywhere else in the app other than main. You need to initialize the fastcacheimageconfig only once. Please try this and update.

Also please try adding a duration like 300 or 400 milliseconds for fadeInDuration property

[large]

Ahh, there was my error. Moved the init to main and everything works as expected. The fade is an effect I do not want to have, so for me it should be optional.

Thanks for a great widget, it will show flags for alot of users these days :)