How to decorate text stroke in Flutter?

Question

How to decorate text stroke in Flutter? It\'s like -webkit-text-stroke - CSS

Answer 1

If you prefer the shadows method, you can configure the stroke width using :

/// Outlines a text using shadows.
static List outlinedText({double strokeWidth = 2, Color strokeColor = Colors.black, int precision = 5}) {
  Set result = HashSet();
  for (int x = 1; x < strokeWidth + precision; x++) {
    for(int y = 1; y < strokeWidth + precision; y++) {
      double offsetX = x.toDouble();
      double offsetY = y.toDouble();
      result.add(Shadow(offset: Offset(-strokeWidth / offsetX, -strokeWidth / offsetY), color: strokeColor));
      result.add(Shadow(offset: Offset(-strokeWidth / offsetX, strokeWidth / offsetY), color: strokeColor));
      result.add(Shadow(offset: Offset(strokeWidth / offsetX, -strokeWidth / offsetY), color: strokeColor));
      result.add(Shadow(offset: Offset(strokeWidth / offsetX, strokeWidth / offsetY), color: strokeColor));
    }
  }
  return result.toList();
}

Use it like this :

Text(
  'My text',
  style: TextStyle(shadows: outlinedText(strokeColor: Colors.blue)),
);