Flutter中如何为Container添加底部虚线边框？

方法一：改造dotted_border包实现 #

不用换包，直接通过指定border参数为Border.only，就能让dotted_border只渲染底部虚线边框，代码示例：

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';

class BottomDottedContainer extends StatelessWidget {
  const BottomDottedContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return DottedBorder(
      // 仅开启底部边框
      border: Border.only(
        bottom: BorderSide(
          color: Colors.grey.shade400,
          width: 1,
        ),
      ),
      // 控制虚线的段长和间隔，按需调整
      dashPattern: const [6, 3],
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: const Text('带底部虚线的容器'),
      ),
    );
  }
}

方法二：自定义绘制（无第三方依赖） #

如果不想引入额外包，用CustomPaint自己画底部虚线更灵活：

自定义组件代码 #

import 'package:flutter/material.dart';

class CustomBottomDottedBorder extends StatelessWidget {
  final Widget child;
  final Color borderColor;
  final double borderWidth;
  final List<double> dashPattern;

  const CustomBottomDottedBorder({
    super.key,
    required this.child,
    this.borderColor = Colors.grey,
    this.borderWidth = 1.0,
    this.dashPattern = const [6, 3],
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        // 定位到底部绘制虚线
        Positioned(
          left: 0,
          bottom: 0,
          right: 0,
          child: CustomPaint(
            painter: DottedLinePainter(
              color: borderColor,
              strokeWidth: borderWidth,
              dashPattern: dashPattern,
            ),
          ),
        ),
      ],
    );
  }
}

// 虚线绘制器
class DottedLinePainter extends CustomPainter {
  final Color color;
  final double strokeWidth;
  final List<double> dashPattern;

  DottedLinePainter({
    required this.color,
    required this.strokeWidth,
    required this.dashPattern,
  });

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

    double distance = 0;
    final path = Path()..moveTo(0, 0);

    while (distance < size.width) {
      for (var i = 0; i < dashPattern.length; i++) {
        final segmentLength = dashPattern[i];
        if (distance + segmentLength > size.width) {
          path.lineTo(size.width, 0);
          break;
        }
        // 偶数段画实线，奇数段跳空
        if (i % 2 == 0) {
          path.lineTo(distance + segmentLength, 0);
        } else {
          path.moveTo(distance + segmentLength, 0);
        }
        distance += segmentLength;
      }
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant DottedLinePainter oldDelegate) {
    return oldDelegate.color != color ||
        oldDelegate.strokeWidth != strokeWidth ||
        oldDelegate.dashPattern != dashPattern;
  }
}

使用示例 #

CustomBottomDottedBorder(
  borderColor: Colors.blue.shade300,
  dashPattern: [8, 4], // 调整虚线样式
  child: Container(
    padding: const EdgeInsets.all(16),
    child: const Text('自定义底部虚线容器'),
  ),
)

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