Categories: android, ios, xcode, flutter, dart

Repeat images next to each other in flutter

1 answer

So this is my first real flutter project and I cannot figure out how to solve this problem...

I'm basically trying to "multiply" or "repeat" an icon infinite times on my AppBar. But I couldn't find a method to actually do this...

Here's a picture what I mean:

https://i.stack.imgur.com/aKOVj.png

And here's my AppBar code:

            child: Stack(               children: <Widget>[                 AppBar(                   backgroundColor: Colors.lightGreen,                   leading: IconButton(                     alignment: Alignment(1.2, 1),                     icon: Icon(Icons.close, color: Colors.white,),                   ),                 ),                 Positioned(                   right: 150,                   left: -180,                   child: Container(                   ),                 ),                 Positioned(                   height: 30,                   top: 0,                   right: 0,                   child: RotationTransition(                     turns: AlwaysStoppedAnimation(-30 / 360),                     child: Image.asset('assets/writer-icon.png',                       repeat: ImageRepeat.repeat,                       alignment: const Alignment(2.5, 3.5),                     )                   ),                 ),                 Positioned(                   height: 30,                   top: 20,                   right: 35,                   child: RotationTransition(                       turns: AlwaysStoppedAnimation(-30 / 360),                       child: Image.asset('assets/writer-icon.png',                         repeat: ImageRepeat.repeat,                         alignment: const Alignment(2.5, 3.5),                       )                   ),                 ),               ],             ), 

Appreciate your help.

Received answer to this question:
The best answer according to the author of the question:

Instead of using Stack with positioned elements, a simpler qnd easier solution would be to use flexibleSpace property of appBar to add a background image. You will need your designer to create a background image as you want.

flexibleSpace: Image( image: AssetImage('assets/images/appbar_bg.png'), fit: BoxFit.cover, ),