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

How to tight the Row in Flutter?

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

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

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

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

  2. 0

    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. 0

    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. 0

    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