CODEWITHSUNDEEP
flutter
Uwe.Schneider
Uwe.Schneider

Reputation: 1415

Flutter - Reduce size of row to necessary space

I would like to create a container that contains a row of a text widget, a sizedBox and an IconButton (to delete this container).

The container should size itself to the children, that means the row

Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this. (From the flutter webpage.)

The row expands as much as possible, but I would like it to be as small as possible. The container (in particular its borders) should be as small as possible

  Widget chipForm(String chipText){
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
            width: 3.0
        ),
        borderRadius: BorderRadius.all(
            Radius.circular(5.0)
        ),
      ),
      child: Row(
        children: [
          Text(chipText),
          SizedBox(width : 10),
          IconButton(
            icon: Icon(Icons.clear),
            onPressed: (){},
          )
        ],
      ),
    );
  }

How do I do that?

Upvotes: 6

Views: 4967

Answers (1)

Christopher Moore
Christopher Moore

Reputation: 17143

The Row widget has a property mainAxisSize which is

How much space should be occupied in the main axis.

Set this to MainAxisSize.min which

Minimize[s] the amount of free space along the main axis, subject to the incoming layout constraints.

to shrink the Row as much as possible.

Example:

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(chipText),
    SizedBox(width : 10),
    IconButton(
      icon: Icon(Icons.clear),
      onPressed: (){},
    )
  ],
),

You should check the documentation before asking here.

Upvotes: 11

Related Questions