how to make two widgets centered inside a row

Question

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

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(),
     ],
  ),
),

Answer 1

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 :P

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(),
    ];

Answer 2

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 "),
      ],
    ),
  ],
),