Text Widget Flutter display some characters and display ellipsis

Question

I have the two toggle buttons with a text widget inside them. I want to show only some characters in the button widget and show ellipse if the length of the text is more. As the Button text is dynamic and could change.

How to add this functionality? Do flutter has another Text widget that can take the length of the text and just display the ellipse if the size of text goes beyond that length.

The textButton has this bug where the text gets OVERFLOW BY. If the Text widget is placed it will get clipped and I can see eliips when a media query is added.

Code

 ToggleButtons(
        children: <Widget>[
          Container(
            width: displaySize.width *0.4,
            margin: EdgeInsets.only(right: 10),
            child: TextButton.icon(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
                ),
              ),
              label: Text(
                "werrtfetreteefgeefg",
                overflow: TextOverflow.ellipsis,
              ),
              icon: Icon(
                Icons.location_pin,
                color: Theme.of(context).accentColor,
                size: 24.0,
              ),
              onPressed: () {
                toggleFilter(0);
                CityPickingDialog()
                    .showCityPickingDialog(context)
                    .then((value) {
                  if (value.isNotEmpty) {
                    Miscellaneous.logMessage(
                        Tag, "CityPickingDialog ${value.toString()}");
                    setState(() {
                      cityPicked = value.toString();
                    });
                  }
                });
              },
            ),
          ),
          Container(
            margin: EdgeInsets.only(right: 10),
            child: TextButton.icon())]

Answer 1

try this:

        ToggleButtons(
          children: <Widget>[
            Container(
              width: 100,
              child: TextButton.icon(
                onPressed: () {},
                style: ButtonStyle(
                  shape: MaterialStateProperty.all(
                    BeveledRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(5))),
                  ),
                ),
                label: Container(
                  width: 20,
                  child: Text(
                    "werrtfetreteefgeefg",
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                icon: Icon(
                  Icons.location_pin,
                  color: Theme.of(context).accentColor,
                  size: 24.0,
                ),
              ),
            ),
            Container(
              width: 50,
              child: Text(
                'lalalalalalalalalalalal',
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              width: 50,
              child: Text(
                'lalalalalalalalalalalal',
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
          isSelected: [true, false, false],
        ),

Answer 2

As the TextButton.icon behaves strangely and we cannot clip the text. This solution worked for me. But I have to remove the TextButton.icon

  Container(
        child: InkWell(
          onTap: (){
            toggleFilter(0);
            CityPickingDialog()
                .showCityPickingDialog(context)
                .then((value) {
              if (value.isNotEmpty) {
                Miscellaneous.logMessage(
                    Tag, "CityPickingDialog ${value.toString()}");
                setState(() {
                  cityPicked = value.toString();
                });
              }
            });
          },
          child: Container(
            width: displaySize.width *0.5,
            padding: EdgeInsets.all(5),
            child: Row(
              children: [
                Icon(
                  Icons.location_pin,
                  color: Theme.of(context).accentColor,
                  size: 24.0,
                ),
                Container(
                  width: displaySize.width *0.40,
                  child: Text(
                    cityPicked,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),