CODEWITHSUNDEEP
flutterflutter-layout
aknd
aknd

Reputation: 843

FadeInImage onFocusChange regenerate

Im trying to use FadeInImage to show whole screen background images, change them with onFocusChange..

Currently only the initial image uses fade then the image just being replaced.

Looking for some help:

How to use FadeInImage so onFocusChange result nw back images fading in..

Maybe use to another widget.

code: https://gist.github.com/andraskende/4dac77fed94b9e4f131c9f644e51bc62#file-videos-dart-L80-L88

return Scaffold(
  body: Container(
    child: Stack(
      children: [
        FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: background,
          fit: BoxFit.fill,
          width: double.infinity,
          height: double.infinity,
          fadeInDuration: Duration(milliseconds: 100),
        ),

.....

child: ListView.builder(
  itemCount: providerApp.videos.length,
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) {
    return Focus(
      canRequestFocus: false,
      onFocusChange: (bool) {
        if (bool) {
          setState(() {
            background = providerApp.videos[index].image;
            description =
                providerApp.videos[index].description;
          });
        }
      },

Upvotes: 5

Views: 383

Answers (1)

farouk osama
farouk osama

Reputation: 2539

Try use UniqueKey like this:

FadeInImage.memoryNetwork(
          key: UniqueKey(),
          placeholder: kTransparentImage, 
          image: background,
          fit: BoxFit.fill,
          width: double.infinity,
          height: double.infinity,
          fadeInDuration: Duration(milliseconds: 100),
        ),

In this case, the FadeInImage will be rebuilt, when call setState method, and will not lose animation

Upvotes: 2

Related Questions