Search code examples
flutterflutter-layoutellipsis

Flutter text is not ellipsized in the list

I have a list of object. There is a name that can be long and according to design it should end with three dots if it can't fit

Container(
          height: 72,
          constraints: BoxConstraints(minWidth: double.infinity),
          child: Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(left: 16.0, right: 16.0),
                child: CircleAvatar(
                  radius: 20.0,
                  backgroundImage: NetworkImage(_model._organizerLogo),
                  backgroundColor: Colors.transparent,
                ),
              ),
              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.only(right: 8.0),
                      child: Text(
                        _model._eventName,
                        style: TextStyle(
                            fontSize: 15,
                            color: Colors.black,
                            fontWeight: FontWeight.w500),
                        textAlign: TextAlign.start,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    ...
                  ])
            ],
          ),
        )

Example

Wrapping Container in Flexible or Expandable didn't work.

How to make oversized text ellipsis? Thanks!

Solution

  • Add Expanded to your Column to give it a fixed width based on the remaining space.

    Container(
      height: 72,
      constraints: BoxConstraints(minWidth: double.infinity),
      child: Row(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(left: 16.0, right: 16.0),
            child: CircleAvatar(
              radius: 20.0,
              backgroundImage: NetworkImage(_model._organizerLogo),
              backgroundColor: Colors.transparent,
            ),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.only(right: 8.0),
                  child: Text(
                    _model._eventName,
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.black,
                        fontWeight: FontWeight.w500),
                    textAlign: TextAlign.start,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ...
              ])
          ),
        ],
      ),
    )