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

Realted questions:

How to navigate through textfields (Next / Done Buttons)

How can I navigate through all my text fields with the "Next" Button on the iPhone Keyboard?

The last text field should close the Keyboard.

I've setup the IB the Buttons (Next / Done) but now I'm stuck.

I implemented the textFieldShouldReturn action but now the Next and Done Buttons close the Keyboard.

Read more…

How to make an app's background image repeat

I have set a background image in my app, but the background image is small and I want it to be repeated and fill in the whole screen. What should I do?

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:background="@drawable/bg"     android:tileMode="repeat">
Read more…

Flutter SDK Set Background image

I am trying to set a background image for the home page. I am getting the image place from start of the screen and filling the width but not the height. Am I missing something in my code? Are there image standards for flutter? Do images scale based on each phone's screen resolution?

class BaseLayout extends StatelessWidget{   @override   Widget build(BuildContext context){     return new Scaffold(       body: new Container(         child: new Column(           mainAxisAlignment: MainAxisAlignment.start,           children: [             new Image.asset("assets/images/bulb.jpg")            ]         )       )     );   } }
Read more…