How to tight the Row in Flutter?-CodePudding

My Row()is too loose. I'd like it to stick to the child.

I tried to add a Flexible with a FlexibleFit.tight with no success.

  return Align(
        alignment: Alignment.center,
        child: Padding(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            child: Column(children: [
              ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  child:
                      // === The logo
                      Container(
                          decoration: BoxDecoration(border: Border.all()),
                          child: Flexible(
                              fit: FlexFit.tight,
                              child: Row(
                                  
                                  children: [
                                    StringBadge()
                                    StringBadge()
                                    StringBadge()
                                  ])
                                  // etc.

CodePudding user response：

Just wrap each of the children of ROW with Expanded

                                Row(
                                  children: [
                                    Expanded(child: StringBadge()),
                                    Expanded(child: StringBadge()),
                                    Expanded(child: StringBadge()),
                                  ])

CodePudding user response：

you must use Expanded Widget. this widget help to keep all screen.

for Example:

Row(
     children: 
      [
      Expanded(child: StringBadge()),
      Expanded(child: StringBadge()),
      Expanded(child: StringBadge()),
                                  ]
)

CodePudding user response：

I finally added a mainAxisSize: MainAxisSize.min as follows:


Row(
    mainAxisSize: MainAxisSize.min, // <= HERE
    children: [
        StringBadge(),
        StringBadge(),
        StringBadge(),