在颤动中彼此相邻地重复图像

Question

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.

Answer 1

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, ),