如何在Flutter中为文本组件和PNG图片添加描边效果？

一、Text组件实现描边效果 #

方法1：Stack叠加偏移文本 #

通过在Stack中放置多层向不同方向偏移的文本作为描边，最上层叠加原文本，快速实现描边效果：

Stack(
  alignment: Alignment.center,
  children: [
    // 生成8个方向偏移的描边文本
    for (final offset in [
      const Offset(-2, -2), const Offset(0, -2), const Offset(2, -2),
      const Offset(-2, 0), const Offset(2, 0),
      const Offset(-2, 2), const Offset(0, 2), const Offset(2, 2),
    ])
      Text(
        "示例文本",
        style: TextStyle(
          fontSize: 40,
          color: Colors.black, // 描边颜色
          fontWeight: FontWeight.bold,
        ),
      ),
    // 原文本层
    Text(
      "示例文本",
      style: TextStyle(
        fontSize: 40,
        color: Colors.white, // 文本主体颜色
        fontWeight: FontWeight.bold,
      ),
    ),
  ],
)

可以将这段逻辑封装成自定义Widget，减少重复代码。

方法2：CustomPaint自定义绘制 #

通过CustomPainter直接绘制文本的描边和填充，可控性更强：

class StrokeTextPainter extends CustomPainter {
  final String text;
  final double fontSize;
  final Color strokeColor;
  final Color fillColor;
  final double strokeWidth;

  StrokeTextPainter({
    required this.text,
    required this.fontSize,
    required this.strokeColor,
    required this.fillColor,
    required this.strokeWidth,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final textSpan = TextSpan(
      text: text,
      style: TextStyle(fontSize: fontSize, fontWeight: FontWeight.bold),
    );
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    )..layout(minWidth: 0, maxWidth: size.width);

    // 计算居中偏移
    final offsetX = (size.width - textPainter.width) / 2;
    final offsetY = (size.height - textPainter.height) / 2;

    // 绘制描边
    final strokePaint = Paint()
      ..color = strokeColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;
    canvas.save();
    canvas.translate(offsetX, offsetY);
    textPainter.paint(canvas, Offset.zero, paint: strokePaint);

    // 绘制填充文本
    final fillPaint = Paint()..color = fillColor;
    textPainter.paint(canvas, Offset.zero, paint: fillPaint);
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

// 使用示例
CustomPaint(
  size: const Size(double.infinity, 100),
  painter: StrokeTextPainter(
    text: "示例文本",
    fontSize: 40,
    strokeColor: Colors.black,
    fillColor: Colors.white,
    strokeWidth: 4,
  ),
)

二、PNG图片实现描边效果 #

通过CustomPaint提取图片Alpha通道生成轮廓，先绘制描边再叠加原图：

class ImageStrokePainter extends CustomPainter {
  final Image image;
  final Color strokeColor;
  final double strokeWidth;

  ImageStrokePainter({
    required this.image,
    required this.strokeColor,
    required this.strokeWidth,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制描边：利用颜色过滤提取Alpha通道生成轮廓
    final strokePaint = Paint()
      ..color = strokeColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, strokeWidth / 2); // 模糊优化描边边缘

    canvas.drawImage(
      image,
      Offset.zero,
      strokePaint..colorFilter = const ColorFilter.mode(Colors.transparent, BlendMode.srcIn),
    );

    // 叠加原图
    canvas.drawImage(image, Offset.zero, Paint());
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

// 使用示例：需先加载图片
FutureBuilder<Image>(
  future: loadImage('assets/your_image.png'), // 替换为你的图片路径
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return CustomPaint(
        size: Size(
          snapshot.data!.width.toDouble(),
          snapshot.data!.height.toDouble(),
        ),
        painter: ImageStrokePainter(
          image: snapshot.data!,
          strokeColor: Colors.black,
          strokeWidth: 6,
        ),
      );
    } else {
      return const CircularProgressIndicator();
    }
  },
)

// 图片加载工具方法
Future<Image> loadImage(String path) async {
  final bytes = await rootBundle.load(path);
  final codec = await instantiateImageCodec(bytes.buffer.asUint8List());
  final frame = await codec.getNextFrame();
  return frame.image;
}

如果需要更精准的轮廓，可借助image包处理图片Alpha通道，生成边缘掩码后再绘制描边。

内容的提问来源于stack exchange，提问作者Souvik Das