Search code examples
flutterrow

How to center and shrink a row simultaneously within its parent?

I have a row with two component in as Card as follows:

Card(child:Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children:[
    Text("Col 1"),
    SizedBox(width: 10),
    Text("Col 2"),
  ])
)

Though the whole row content is horizontally centered in the screen, it expands the whole width where I'd like it to shrink to the space it really needs.

How to do that?

Solution

  • Simply add

    mainAxisSize: MainAxisSize.min,

    to the Row. So like

    Card(child:Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children:[
    Text("Col 1"),
    SizedBox(width: 10),
    Text("Col 2"),
  ])
)