Flutter how to have several cross axis alignment for each child in row

user_6447123 0
Viewed 882

How can I have different cross axis alignment for each child of row or column?

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(width: 100, height: 100, color: Colors.blue),
        Container(width: 100, height: 500, color: Colors.red),
        Container(width: 100, height: 300, color: Colors.green),
        Container(width: 100, height: 200, color: Colors.yellow),
        Container(width: 100, height: 100, color: Colors.purple),
      ],
    );

I want to put blue box at top , green at center and yellow to bottom

flutter
3 Answers

you can use Align class to set an align for each Widget

for example if you want a container to be at top left of screen you should say

    Align(
          alignment: Alignment.topLeft,
          child: Container(width: 100, height: 100, color: Colors.blue),
        ),

so in your case here is the code

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.topLeft,
          child: Container(width: 100, height: 100, color: Colors.blue),
        ),
        Container(width: 100, height: 500, color: Colors.red),
        Align(
          alignment: Alignment.center,
          child: Container(width: 100, height: 300, color: Colors.green),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(width: 100, height: 200, color: Colors.yellow),
        ),
        Container(width: 100, height: 100, color: Colors.purple),
      ],
    );

and result will be this

enter image description here\

read more about it in here Align

user_142711100

You can achieve this by using Column inside Row widget & by specifying the mainAxisAlignment property, you can easily arrange any box to start, center or end.

Here is the code:

return Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(width: 100, height: 100, color: Colors.blue),
    Container(width: 100, height: 500, color: Colors.red),
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(width: 100, height: 300, color: Colors.green),
      ],
    ),
    Column(mainAxisAlignment: MainAxisAlignment.end, children: [
      Container(width: 100, height: 200, color: Colors.yellow),
    ]),
    Container(width: 100, height: 100, color: Colors.purple),
  ],
);
user_95116500

The Wrap Widget will automatically Wrap the Data Accordingly. This can be used to create Carousels with different images and other factors.

      height: MediaQuery.of(context).size.height*0.6,
      child:
      Wrap(
        children: [
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.blue),
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.green),
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.orangeAccent),
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.pink),
        ],
      ),

    );

The output will be as follows : https://i.stack.imgur.com/bKn6L.png

Output image creates 4 Containers in which you can add other widgets such as Images or Text or Stack widget to stack your data

user_80703010
Related