Unexpected gray underline on ActionChip label
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
Matthew Patience
Updated on December 01, 2022Comments
-
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.
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.