skip to Main Content

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.                 

enter image description here

4

Answers


  1. Chosen as BEST ANSWER

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

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

  2. Just wrap each of the children of ROW with Expanded

                                    Row(
                                      children: [
                                        Expanded(child: StringBadge()),
                                        Expanded(child: StringBadge()),
                                        Expanded(child: StringBadge()),
                                      ])
    Login or Signup to reply.
  3. 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()),
                                      ]
    )
    
    Login or Signup to reply.
  4. Depending on how your UI should look like, there are few options:

    1. like the others said, wrap each child in an expanded. however, there may be other implications for this depending on the child widget.

    2. use the mainAxisAlignment property of the Row widget

    Row(
      mainAxisAlignment: MainAxisAlignment.spacedBetween, // or spacedEvenly, etc
      children: [
        StringBadge(),
        ...,
        StringBadge(),
      ],
    ),
    
    1. Use Spacer() to put an expanding space between the widgets
    Row(
      children: [
        StringBadge(),
        const Spacer(), // place it/them wherever necessary
        StringBadge(),
        StringBadge(),
      ],
    ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search