CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-dependenciesflutter-animation
user9436741
user9436741

Reputation:

How to show the whole chip text in Flutter

I'm trying to display the whole text in my flutter chip but some reason it got faded if the text is longer than the chip so I would be really appreciated if I can get any help on how I can display the whole full text without it being faded?.


  Widget _widgetToAdd(String i) {
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.all(2),
      height: height * 0.05,
      width: 100,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
      child: Chip(
        label: Text(
          i,
          style: TextStyle(
              color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Theme.of(context).accentColor,
      ),
    );
  }

  for (var i = 0; i < listOfTages.length; i++) {
    list.add(_widgetToAdd(listOfTages[i]));
  }

  return Wrap(children: list);
}

enter image description here

Upvotes: 0

Views: 2350

Answers (3)

s4nk37
s4nk37

Reputation: 303

maxLines: 2,
overflow: TextOverflow.ellipsis,

This worked for me. This is not the expected behaviour while applying ellipsis. Still it worked like clip.

Upvotes: 0

Fer Buero Trebino
Fer Buero Trebino

Reputation: 113

The label of the chip have as a default value of TextOverflow.fade

You can overwrite this value like this:

Widget _widgetToAdd(String i) {
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.all(2),
      height: height * 0.05,
      width: 100,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
      child: Chip(
        label: Text(
          i,
          overflow: TextOverflow.visible,
          style: TextStyle(
              color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Theme.of(context).accentColor,
      ),
    );
  }

  for (var i = 0; i < listOfTages.length; i++) {
    list.add(_widgetToAdd(listOfTages[i]));
  }

  return Wrap(children: list);
}

Upvotes: 0

dm_tr
dm_tr

Reputation: 4783

Either remove or increase the width property of the parent Container

Container(
  alignment: Alignment.center,
  margin: EdgeInsets.all(2),
  height: height * 0.05,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
  child: Chip(
    label: Text(i, style: TextStyle(
      color: Colors.black,
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),),
    backgroundColor: Theme.of(context).accentColor,
  ),
)

Upvotes: 1

Related Questions