FadeInImage onFocusChange regenerate

user_1068975 0
Viewed 247

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;
          });
        }
      },
flutter-layout flutter
1 Answers

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

user_104983740
Related