flutterflutter-row

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

Solution

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