Unexpected gray underline on ActionChip label

Question

On one of my action chips I am getting this gray underline on the label. FYI, this is Flutter Web and it only seems to happen on Chrome Android, never on iOS Safari or desktop Chrome.

The action chip acts as a filter button that when clicked allows you to select different values. Only for some of the values does it show this underline. I'm familiar with the yellow underline error that flutter has, but this gray is new for me.

ActionChip(
    label: Text(_label(),
        style: Theme.of(context).textTheme.bodyText2.copyWith(
            color: (_hasSelectedFilters())
                ? AppTheme.filterText
                : AppTheme.highEmphasis)),
    backgroundColor: Colors.transparent,
    side: BorderSide(
        color: (_hasSelectedFilters())
            ? AppTheme.highEmphasis
            : AppTheme.mediumEmphasis,
        width: 1.0),
    labelPadding: EdgeInsets.only(left: 8.0, right: 8.0),
    onPressed: _showFilters,
)

String _label() {
  if (!_hasSelectedFilters()) {
    return "Material type";
  } else if (widget.controller.selectedFilters.length == 1) {
    return _filters
      .firstWhere((element) =>
          element.value.code == widget.controller.selectedFilters.first)
      .label;
  } else {
    return "${widget.controller.selectedFilters.length} materials";
  }
}

UPDATE: I was able to resolve it by changing the Text widget to a RichText widget. However, it's strange that it resolves it because the Text widget is a wrapper for RichText.

score 4 · Answer 1 · answered Nov 15 '21 at 14:04

Web Renderer is a default option used in Flutter - it emulates Skia via absolutely positioned HTML elements and thus prone to old good cross-browser display issues. You can try switching to CanvasKit renderer which is a WASM based full Skia implementation and ensures pixel perfect matching of UI to native platforms.

Running via terminal: flutter run -d chrome --web-renderer canvaskit

Building: flutter build web --web-renderer canvaskit

If you use VSCode you can add a separate configuration for CanvasKit to launch.json e.g.:

{
  "name": "Release CanvasKit",
  "request": "launch",
  "type": "dart",
  "flutterMode" : "release",
  "program" : "lib/main.dart",
  "args": [
    "--web-renderer", "canvaskit"
  ],
}

Full example: https://github.com/maxim-saplin/flutter_web_spa_sample/blob/main/.vscode/launch.json

More on Flutter Web renderers: https://flutter.dev/docs/development/tools/web-renderers

score 0 · Answer 2 · answered Nov 11 '21 at 09:02

What renderer do you use for Flutter web?
I suspect it can be caused by horizontal overflow and it is the scroll bar.
Please use the Flutter developer tool to examine the tree: the widget tree and the render object tree. You can directly see which widget is painting this strange gray line. If you find it but still cannot understand, please take a screenshot and update the question.
I was able to resolve it by changing the Text widget to a RichText widget. Text has some different default values than RichText, so it is not a very strange thing. This can also be a way to find out the cause of bug: You can start with a normal RichText, and progressively give RichText some parameters that are identical to what a Text will normally do, and you will finally see that one parameter cause the problem.

Unexpected gray underline on ActionChip label

2 Answers2

Linked