How to prevent Row from taking all available width?

Question

I have one problem with my CustomChip :

I need to wrap the card to fit the content only.

However, I have a second requirement: The long text should overflow fade.

When I fixed the second problem, this issue started to occur when I added Expanded to wrap the inner Row

I don't understand why the inner Row also seems to expand although its mainAxisSize is already set to min

Here is the code:

The screen:

import 'package:flutter/material.dart';
import 'package:app/common/custom_chip.dart';

class RowInsideExpanded extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 1.0,
            ),
          ),
          width: 200.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildChip('short'),
              _buildChip('looooooooooooooooooooooongg'),
            ],
          ),
        ),
      ),
    );
  }

  _buildChip(String s) {
    return Row(
      children: [
        Container(
          color: Colors.red,
          width: 15,
          height: 15,
        ),
        Expanded(
          child: CustomChip(
            elevation: 0.0,
            trailing: Container(
              decoration: BoxDecoration(
                color: Colors.grey,
                shape: BoxShape.circle,
              ),
              child: Icon(Icons.close),
            ),
            onTap: () {},
            height: 42.0,
            backgroundColor: Colors.black12,
            title: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Text(
                s,
                softWrap: false,
                overflow: TextOverflow.fade,
                style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16.0),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

And the CustomChip

import 'package:flutter/material.dart';
class CustomChip extends StatelessWidget {
  final Widget leading;
  final Widget trailing;
  final Widget title;
  final double height;
  final double elevation;
  final Color backgroundColor;
  final VoidCallback onTap;
  const CustomChip({
    Key key,
    this.leading,
    this.trailing,
    this.title,
    this.backgroundColor,
    this.height: 30.0,
    this.elevation = 2.0,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: elevation,
      color: backgroundColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      child: InkWell(
        onTap: onTap,
        child: Container(
          height: height,
          child: Padding(
            padding: const EdgeInsets.only(left: 5.0, right: 5.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                leading ?? Container(),
                SizedBox(
                  width: 5.0,
                ),
                Flexible(
                  child: title,
                  fit: FlexFit.loose,
                ),
                SizedBox(
                  width: 5.0,
                ),
                trailing ?? Container(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

user_1115743 · Answer

Look for "MainAxisSize" property and set to "MainAxisSize.min"

user_6727914 · Answer

Instead of Expanded, just replace it with a Flexible that's because Expanded inherits Flexible but set the fit proprety to FlexFit.tight

When fit is FlexFit.tight, the box contraints for any Flex widget descendant of a Flexible will get the same box contraints. That's why your Row still expands even though you already set its MainAxisSize to min. I changed your code to print the box contraints using a the LayoutBuilder widget. Consider your code with Expanded:

import 'package:flutter/material.dart';

class RowInsideExpanded extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 1.0,
            ),
          ),
          width: 200.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildChip('short'),
              SizedBox(
                height: 5,
              ),
              _buildChip('looooooooooooooooooooooongg'),
            ],
          ),
        ),
      ),
    );
  }

  _buildChip(String s) {
    return Row(
      children: [
        Container(
          color: Colors.red,
          width: 15,
          height: 15,
        ),
        Expanded(
          child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
            print("outter $constraints");

            return Container(
              color: Colors.greenAccent,
              child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
                print("inner $constraints");

                return Row(
                  mainAxisSize: MainAxisSize.min, // this is ignored
                  children: [
                    SizedBox(
                      width: 5.0,
                    ),
                    Flexible(
                      fit: FlexFit.loose,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
                        child: Text(
                          s,
                          softWrap: false,
                          overflow: TextOverflow.fade,
                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16.0),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 5.0,
                    ),
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        shape: BoxShape.circle,
                      ),
                      child: Icon(Icons.close),
                    ),
                  ],
                );
              }),
            );
          }),
        ),
      ],
    );
  }
}

It prints

I/flutter ( 7075): outter BoxConstraints(w=183.0, 0.0<=h<=Infinity) I/flutter ( 7075): inner BoxConstraints(w=183.0, 0.0<=h<=Infinity)

(Look at the width in w, it constrained to be 183.0 for both outter and inner Row)

Now I changed the Expanded to Flexible and check the logs:

I/flutter ( 7075): outter BoxConstraints(0.0<=w<=183.0, 0.0<=h<=Infinity)
I/flutter ( 7075): inner BoxConstraints(0.0<=w<=183.0, 0.0<=h<=Infinity)

(Look at the width in w, it constrained to between zero and 183.0 for both outter and inner Row)

Now your widget is fixed:

How to prevent Row from taking all available width?

2 Answers