'Flutter - AnimatedSwitcher isn't smooth

I've implemented an animation of images, what I wanted to do was create a custom circular spinner with images that switch to give this effect, the problem is that with AnimatedSwitcher for a little fraction of time there's a black space between one image and another.

Here's the code of the animation:

AnimatedSwitcher(
    duration: Duration(milliseconds: 200),
    child: Image.asset(
        values[_index % values.length],
        key: UniqueKey(),
        height: 50,
        width: 50,
    ),
)

Is there a way to solve this issue or an alternative to AnimatedSwitcher?

flutter flutter-animation

Solution 1:^[1]

The second image might need some time to be loaded into memory. I had the similar issue before but solved it with a workaround. I used a FadeInImage with a transparent placeholder on top of the previous image:

import 'package:transparent_image/transparent_image.dart';

Stack(
  children: [
    Image(
      image: previousImage,
    ),
    FadeInImage(
      fadeInDuration: Duration(milliseconds: 300),
      placeholder: MemoryImage(kTransparentImage),
      image: currentImage,
    )
  ],
),

transparent_image was a dependency I added in pubspec.yaml.

Solution 2:^[2]

I think precacheImage would be help you. https://api.flutter.dev/flutter/widgets/precacheImage.html

I write a same function like you, but I have not get a black space between image. But if I do not set the Key of Image, then I would got a black space.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	dumazy
Solution 2	nillouise

'Flutter - AnimatedSwitcher isn't smooth

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]