skip to Main Content

Let’s imagine that there is a container with a column. It has a row and a container.

I want the row to be centered horizontally and the container to be pressed to the left edge relative to the row.

If I give an example, let’s imagine that the container width is 126
row takes up 100, which means if we center, then the "margin" on the left and right is 13 and the container should have 13 on the left

I hope I explained what I’m trying to get.

Thanks in advance and sorry for my bad English

Container(
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [Text('Center'),Text('Row')],
            ),
            Container(child: Text('Container'),)
          ],
        ),
      )

I tried using a LayoutBuilder, but it seems to me that this is not the right approach and it is better not to take it into account.

I also tried to specify alignment for the container, but it is logical that it will be set according to the parent container.
Example in the picture at the request in the comments

2

Answers


  1. Question is not very clear but from what I am able to get, try below.

    For the column give property of
    crossAxisAlignment: CrossAxisAlignment.stretch

    and Wrap the Column with a parent widget IntrinsicWidth.

    Login or Signup to reply.
  2. Try below code…

    Container(
      width: 126,
      child: Column(
        children: [
          Text("text"),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Center"),
              Text("Row"),
            ],
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              child: Text("Container"),
            ),
          ),
        ],
      ),
    )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search