CODEWITHSUNDEEP
flutterwidgetflutter-layout
UNeverNo
UNeverNo

Reputation: 583

Alignment of widgets ignored in row

I'm creating a new widget that displays some bubbles, that should be connected by lines.

5-------6
|
4-------3
        |
1-------2

I chose a ListView as the outer widget, if I understood it correctly this should give me the scrollability:

return Expanded(
  child: ListView(
    children: _createLWItems(_createBubbles()),        
  ),
);

Children is a List of my inner widget. Each widget is a row, so I can place two bubbles next to each other:

    return Container(
      child: Row(
        children: <Widget>[
          Container(
            child: bubbleItem1,
            alignment: Alignment.centerLeft,
          ),
          Container(
            child: bubbleItem2,
            alignment: Alignment.centerRight,
          ) 
        ],
      ),
      decoration: BoxDecoration( //TODO remove after testing
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.blue),          
      ),
    );

BubbleItem is only a Container with a BoxDecoration wrapped with a GestureDetector.

What I wanted to achieve is, that the left bubble is aligned to the left, and the right to the right, but instead, both are placed next to each other to the left, although row takes the entire width of my screen, as you can see (blue border):

aligned to the left

As I read here there is a MainAxisAlignment for the row-widget but this would just align all childs left, right, centered, etc., not what I have in mind.

How can I place those bubbles the way I intend to? If they are placed correctly I want to connect them with lines. Is there a way to do this without calculation? My idea would be to insert another widget between the bubbles that takes a line, but I'd need to tell it somehow, that it should take the entire space between the bubbles of his row.

At the moment I'm a bit unsure if I should calculate anything because I read something about 'you cannot calculate before it is rendered', but on the other hand I'm missing some understanding how to do it in flutter without it.

Upvotes: 1

Views: 3495

Answers (2)

Lakhwinder Singh
Lakhwinder Singh

Reputation: 7209

You are giving the Alignment to the container's item, not the container itself

Try giving the Alignment to the Row

Container getContainer(){
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            height: 50,
            width: 50,

            child: Center(child: Text("Left")),
          ),
          Container(
            height: 50,
            width: 50,

            child: Center(child: Text("Right")),
          )
        ],
      ),
      decoration: BoxDecoration( //TODO remove after testing
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.blue),
      ),
    );
  }

enter image description here

Upvotes: 0

Ovidiu
Ovidiu

Reputation: 8714

Alignment does work for Row children, but not in the way that you are expecting. If for example you had a Row child with half the height of the Row, you could use Alignment to specify if you want that child at the top or the bottom of the Row - the default is centered.

By default, the children are positioned sequentially within a Row (horizontally) as well as within a Column (vertically), which is what you've got in the screenshot you attached. If you simply wanted to position the 2 circles at the left and right ends of the Row, you could use a MainAxisAlignment value of spaceBetween, which places the free space evenly between the children.

If you want to also draw a line between the circles however, then you will not have any space left to distribute within the Row, so the MainAxisAlignment will not help. What you want instead is an Expanded widget within the Row, between the circles. This will create a widget that takes up all the remaining space within the Row, which is where you want your line to be.

  Row(
    children: <Widget>[
      Container(
        child: bubbleItem1,
        alignment: Alignment.centerLeft,
      ),
      Expanded(
        child: Divider(),
      ),
      Container(
        child: bubbleItem2,
        alignment: Alignment.centerRight,
      ) 
    ],
  )

Upvotes: 4

Related Questions