Flutter如何实现容器边框厚度沿长度渐变的效果

要实现顶部和底部边框从左到右宽度从4px过渡到0.5px的效果，直接用BorderSide无法实现（它不支持宽度渐变），可以通过自定义CustomPainter绘制梯形边框来达成视觉效果，以下是具体实现：

步骤1：创建渐变边框的CustomPainter #

这个Painter通过绘制梯形来模拟宽度渐变的边框，左侧宽度4px，右侧0.5px：

class GradientBorderPainter extends CustomPainter {
  final Color color;
  final double startWidth;
  final double endWidth;

  GradientBorderPainter({
    required this.color,
    this.startWidth = 4.0,
    this.endWidth = 0.5,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;

    // 绘制顶部渐变边框（梯形）
    final topPath = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0)
      ..lineTo(size.width, endWidth)
      ..lineTo(0, startWidth)
      ..close();
    canvas.drawPath(topPath, paint);

    // 绘制底部渐变边框（梯形）
    final bottomPath = Path()
      ..moveTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, size.height - endWidth)
      ..lineTo(0, size.height - startWidth)
      ..close();
    canvas.drawPath(bottomPath, paint);
  }

  @override
  bool shouldRepaint(covariant GradientBorderPainter oldDelegate) {
    return oldDelegate.color != color ||
        oldDelegate.startWidth != startWidth ||
        oldDelegate.endWidth != endWidth;
  }
}

步骤2：修改原InfoContainer组件 #

通过Stack将原容器与自定义Painter层叠，同时用LayoutBuilder自适应容器尺寸，确保圆角裁剪生效：

class InfoContainer extends StatelessWidget {
  final Color color;
  final IconData icon;
  final String text;

  const InfoContainer({
    super.key,
    required this.color,
    required this.icon,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(5.0),
      child: LayoutBuilder(
        builder: (context, constraints) {
          return Stack(
            children: [
              // 主容器：保留左侧固定边框和背景色
              Container(
                width: constraints.maxWidth,
                height: constraints.maxHeight,
                decoration: BoxDecoration(
                  color: color.withOpacity(0.3),
                  border: Border(
                    left: BorderSide(color: color, width: 4.0),
                  ),
                ),
                // 内部内容：图标+文本（根据需求调整样式）
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Row(
                    children: [
                      Icon(icon, color: color, size: 24),
                      const SizedBox(width: 12),
                      Text(
                        text,
                        style: const TextStyle(fontSize: 16),
                      ),
                    ],
                  ),
                ),
              ),
              // 叠加渐变边框
              CustomPaint(
                painter: GradientBorderPainter(color: color),
                size: Size(constraints.maxWidth, constraints.maxHeight),
              ),
            ],
          );
        },
      ),
    );
  }
}

说明 #

• 梯形填充的方式完美模拟了宽度渐变的边框效果，视觉上和真实渐变宽度一致。
• LayoutBuilder确保自定义Painter能自适应父容器的尺寸，避免硬编码高度/宽度。
• ClipRRect会同时裁剪主容器和自定义Painter的内容，保证圆角效果统一。

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