CODEWITHSUNDEEP
flutter
James
James

Reputation: 181

Horizontally repeating an image in Flutter

I want to create a rotating globe effect. I'm aiming to do this by taking a world map and simply scrolling it horizontally. The cleanest way I've thought of to do this is to just take an image, repeat it, and use Alignment(x, y) to animate it.

I'm only able to get it to repeat and scroll vertically.

In this example, I've offset X and Y using Alignment. You can see the effect happening on Y, but not X. I've tried quite a few different techniques to try to get this to work, but this is the closest I've been able to get.

return Container(
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  width: 200.0,
  height: 200.0,
  child: ClipOval(
    child: Image.network(
      'https://pasarelapr.com/images/printable-world-maps-in-black-and-white/printable-world-maps-in-black-and-white-3.jpg',
      repeat: ImageRepeat.repeat,
      alignment: const Alignment(2.5, 3.5),
    ),
  ),
);

How can I make it scroll infinitely horizontally? Thank you!

Upvotes: 1

Views: 4230

Answers (1)

cipli onat
cipli onat

Reputation: 2142

you can see more details about image repating : ImageRepeat

Image.repeatX => horizontally,

Image.repeatY => vertically

this code snippet should work for you : 

                  Container(
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.blue,
                    ),
                    height: 200,
                    width: 200,
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: ClipOval(
                        child: Image.network(
                          'https://pasarelapr.com/images/printable-world-maps-in-black-and-white/printable-world-maps-in-black-and-white-3.jpg',
                          width: 600, 
                          repeat: ImageRepeat.repeatX,
                          alignment: const Alignment(2.5, 3.5),
                        ),
                      ),
                    ),
                  )

code image here

Upvotes: 4

Related Questions