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

Flutter – how to make two widgets centered inside a row

I have a custom table and in its rows there is such a widget row (row in row C: ) and I can’t figure out how to make them centered, and not as in the screenshot :C

enter image description here

These properties don’t help :C

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,

Expanded(
  child: Row(
    children: [
       Text(
         item.versionStatus == MockVersionStatus.complete ? 'ready' :  'load',
         style: TextStyleBook.paragraphP2,
       ),
       if (item.versionStatus != MockVersionStatus.complete)
          const SizedBox(width: 10,),
       if (item.versionStatus != MockVersionStatus.complete)
            const ThreeDotsAnimation(),
     ],
  ),
),
Tags:

2

Answers


  1. 0

    I’m not sure if I understand what you are asking here. why are those properties not working for you, Are you using them properly?

    Check this example to see if it helps. Notice you can change how you split the vertical space in the Column, and the horizontal space in the Row

    Take a look at this example:

    Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text("This is a text"),
        Text("Another text"),
        Text("third"),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text("A asdjaks"),
        Text("B qohdaosd"),
        Text("C ashdjasd "),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text("A asdjaks"),
        Text("B qohdaosd"),
        Text("C ashdjasd "),
      ],
    ),
  ],
),

    table_example

    Login or Signup to reply.
  2. 0

    I didnt get what you mean by centering it.

    If you mean horizontally they are not centered, you can check using the inspector, the space they cover. But they seems centered to me 😛

    Not related to the question but you dont need the same if statement twice, you can use it like this:

    if (item.versionStatus != MockVersionStatus.complete)
    ...[
      const SizedBox(width: 10),
      const ThreeDotsAnimation(),
    ];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search