为TextFormField添加边框内嵌文本装饰

直接给你可运行的自定义InputBorder实现代码，你可以根据图中效果调整细节：

import 'package:flutter/material.dart';

class CustomInputBorder extends InputBorder {
  final BorderSide side;
  final Radius borderRadius;
  // 可按需添加自定义参数，比如底部边框加粗比例、是否隐藏顶部边框等

  const CustomInputBorder({
    this.side = const BorderSide(),
    this.borderRadius = const Radius.circular(8.0),
  });

  @override
  InputBorder copyWith({BorderSide? side, Radius? borderRadius}) {
    return CustomInputBorder(
      side: side ?? this.side,
      borderRadius: borderRadius ?? this.borderRadius,
    );
  }

  @override
  EdgeInsetsGeometry get dimensions {
    return EdgeInsets.all(side.width);
  }

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, borderRadius).deflate(side.width));
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return Path()..addRRect(RRect.fromRectAndRadius(rect, borderRadius));
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection, BoxShape? shape, BorderSide? borderSide}) {
    final paint = side.toPaint();
    final rrect = RRect.fromRectAndRadius(rect, borderRadius);
    
    // 绘制基础圆角边框
    canvas.drawRRect(rrect, paint);

    // 如果需要图中特殊效果（比如底部边框加粗），取消注释并调整参数
    // final bottomRect = Rect.fromLTWH(rect.left, rect.bottom - side.width * 2, rect.width, side.width * 2);
    // canvas.drawRRect(RRect.fromRectAndCorners(
    //   bottomRect,
    //   bottomLeft: borderRadius,
    //   bottomRight: borderRadius,
    // ), paint);
  }

  @override
  bool get isOutline => true;
}

使用方式 #

在TextField的decoration中指定自定义边框：

TextField(
  decoration: InputDecoration(
    border: CustomInputBorder(
      side: BorderSide(color: Colors.grey, width: 1),
      borderRadius: Radius.circular(12),
    ),
    focusedBorder: CustomInputBorder(
      side: BorderSide(color: Colors.blue, width: 2),
      borderRadius: Radius.circular(12),
    ),
    hintText: "请输入内容",
    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  ),
)

关键注意点 #

1. 必须重写getInnerPath和getOuterPath，否则输入框内边距会出现偏移
2. paint方法中如果需要局部边框（比如只画底部+左右半截），可以通过裁剪Path或单独绘制指定区域实现
3. 可根据目标效果添加自定义参数（比如是否显示顶部边框、边框分段颜色等）

内容的提问来源于stack exchange，提问作者Riad El Abiad