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

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

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?

Tags:

2

Answers


  1. 0

    Using the Expanded widget seems like your best bet, as it will shrink the row whilst ensuring that it’s aligned in the center.

    Card(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        flex: 1,
        child: Text("Col 1"),
      ),
      SizedBox(width: 10),
      Expanded(
        flex: 1,
        child: Text("Col 2"),
      ),
    ],
  ),
)
    Login or Signup to reply.
  2. 0

    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"),
  ])
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search