Unexpected gray underline on ActionChip label

195

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

Share:
195
Matthew Patience
Author by

Matthew Patience

Updated on December 01, 2022

Comments

  • Matthew Patience
    Matthew Patience over 1 year

    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.

    enter image description here

    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.