Flutter Question posted in
The official Flutter documentation can be found here.

How to center middle element in a flutter row of 3 elements

How to center middle element in a row of 3 elements (where every element has different length), I want side elements to be maximally on the left/right side and middle element to be exactly on middle?

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(
        child: Container(
      child: Text(
        'el',
        style: TextStyle(
          fontSize: 16,
          color: Color(0xFFD50000),
        ),
      ),
    )),
    Expanded(
        child: Container(
      child: Text('elem',
          style: TextStyle(
            color: Colors.black,
            fontSize: 16,
          )),
    )),
    Expanded(
        child: Container(
      child: Text('longest elem',
          style: TextStyle(
            fontSize: 16,
            color: Color(0xFFD50000),
          )),
    )),
  ],
)

enter image description here

Tags:

2

Answers


  1. 0

    While you are using Expanded everyone is getting flex:1. Now you can use align from Container and then textAlign to make it center(just one of them is needed).

    Expanded(
  child: Container(
    alignment: Alignment.center,
    child: Text(
      'elem',
      textAlign: TextAlign.center, //may work without it
      style: TextStyle(
        color: Colors.black,
        fontSize: 16,
      ),
    ),
  ),
),
    Login or Signup to reply.
  2. 0

    Children in your row are properly centered because your expanded takes as much space as possible for every widget on the row’s main axis (horizontally). The proportion is decided by the Expanded.flex property which defaults to 1 and thus in your case gives every child same amount of space.

    Your Text widget isn’t aligning the text in the center. To fix this, provide argument TextAlign.center to the parameter textAlign in your Text widgets.

    Refer Flutter’s API Documentation for Text.textAlign, and Text widget.

    Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(
        child: Container(
      child: Text(
        'el',
        textAlign: TextAlign.center, // here
        style: TextStyle(
          fontSize: 16,
          color: Color(0xFFD50000),
        ),
      ),
    )),
    Expanded(
        child: Container(
      child: Text('elem',
          textAlign: TextAlign.center, // here
          style: TextStyle(
            color: Colors.black,
            fontSize: 16,
          )),
    )),
    Expanded(
        child: Container(
      child: Text('longest elem',
          textAlign: TextAlign.center, // and here
          style: TextStyle(
            fontSize: 16,
            color: Color(0xFFD50000),
          )),
    )),
  ],
);

    Resultant UI for the above code:
    Result Flutter UI

    I recommend reading this article on flutter. It explains a lot about constraints and alignment.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search