如何为Flutter TextField实现左侧非均匀圆角边框

需求 #

复刻TextField左侧带圆角的非均匀边框（左侧为宽幅带圆角的色块，其余边为常规边框）。

之前尝试遇到的问题 #

• 给单侧边框的BoxDecoration添加borderRadius时触发错误：A borderRadius can only be given on borders with uniform colors and styles，相关代码：

  decoration: const BoxDecoration(
    border: Border(
      left: BorderSide(width: 6, color: Colors.red),
    ),
    // borderRadius: BorderRadius.all(Radius.circular(4)),
  ),
  child: pfTextField,
  

• 部分方案依赖第三方包，不符合原生Flutter实现需求；
• Flutter原生边框特性仅支持各边颜色/样式统一的场景，无法适配当前需求；
• 自定义OutlineInputBorder实现时，视图重建会出现闪烁问题，自定义类代码：

  import 'package:flutter/material.dart';
  
  class CustomInputBorder extends OutlineInputBorder {
  
    final Color? leftBorderSideColor;
  
    /// Constructeur
    const CustomInputBorder ({
      this.leftBorderSideColor,
      super.borderRadius,
      super.borderSide,
      super.gapPadding,
    });
  
    @override
    void paint(
      Canvas canvas,
      Rect rect, {
      double? gapStart,
      double gapExtent = 0.0,
      double gapPercentage = 0.0,
      TextDirection? textDirection,
    }) {
     
      RRect newRect = RRect.fromLTRBAndCorners(
        rect.left,
        rect.top,
        rect.left + 4,
        rect.bottom,
        topLeft: const Radius.circular(4),
        bottomLeft: const Radius.circular(4),
      );
      canvas.drawRRect(
        newRect,
        borderSide.toPaint()
          ..color = leftBorderSideColor ?? Colors.transparent
          ..style = PaintingStyle.fill,
      );
      super.paint(
        canvas,
        rect,
        gapStart: gapStart,
        gapExtent: gapExtent,
        gapPercentage: gapPercentage,
        textDirection: textDirection,
      );
    }
  }
  

解决方案 #

方案1：原生组件嵌套实现（无自定义绘制，无闪烁）

用Stack将左侧圆角色块与TextField叠加，完全依赖原生组件，逻辑简洁无问题：

Stack(
  alignment: Alignment.centerLeft,
  children: [
    // 左侧带圆角的宽边框色块
    Container(
      width: 6, // 左侧边框宽度
      height: double.infinity,
      decoration: const BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(4),
          bottomLeft: Radius.circular(4),
        ),
      ),
    ),
    // TextField，通过占位将内容右移，避免被左侧色块遮挡
    TextField(
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
        // 基础边框配置
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(4),
          borderSide: const BorderSide(color: Colors.grey),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(4),
          borderSide: const BorderSide(color: Colors.grey),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(4),
          borderSide: const BorderSide(color: Colors.blue),
        ),
        // 左侧占位，留出左侧色块的宽度+内边距
        prefixIconConstraints: const BoxConstraints(minWidth: 6 + 12, maxWidth: 6 + 12),
        prefixIcon: const SizedBox(width: 6),
      ),
    ),
  ],
)

说明：通过prefixIcon占位将TextField的内容向右偏移，避免被左侧圆角色块遮挡，同时保留TextField原生的边框和交互逻辑。

方案2：修复自定义OutlineInputBorder的闪烁问题

闪烁原因多为绘制顺序或状态不一致导致，修改自定义类如下：

import 'package:flutter/material.dart';

class CustomInputBorder extends OutlineInputBorder {
  final Color leftBorderSideColor;

  const CustomInputBorder({
    required this.leftBorderSideColor,
    super.borderRadius,
    super.borderSide,
    super.gapPadding,
  });

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
    // 先绘制基础边框，再叠加左侧圆角色块
    super.paint(
      canvas,
      rect,
      gapStart: gapStart,
      gapExtent: gapExtent,
      gapPercentage: gapPercentage,
      textDirection: textDirection,
    );

    // 绘制左侧带圆角的色块
    final leftBorderRect = RRect.fromLTRBAndCorners(
      rect.left,
      rect.top,
      rect.left + 6, // 左侧边框宽度
      rect.bottom,
      topLeft: borderRadius?.topLeft ?? const Radius.circular(4),
      bottomLeft: borderRadius?.bottomLeft ?? const Radius.circular(4),
    );

    canvas.drawRRect(
      leftBorderRect,
      Paint()
        ..color = leftBorderSideColor
        ..style = PaintingStyle.fill,
    );

    // 处理输入框间隙（如浮动标签、前缀区域），避免遮挡文字
    if (gapStart != null && gapExtent > 0) {
      final gapRect = Rect.fromLTWH(
        rect.left,
        gapStart,
        6,
        gapExtent,
      );
      canvas.drawRect(
        gapRect,
        Paint()..color = Colors.white, // 替换为输入框背景色
      );
    }
  }

  // 重写copyWith确保状态传递一致
  @override
  CustomInputBorder copyWith({
    BorderSide? borderSide,
    BorderRadius? borderRadius,
    double? gapPadding,
    Color? leftBorderSideColor,
  }) {
    return CustomInputBorder(
      leftBorderSideColor: leftBorderSideColor ?? this.leftBorderSideColor,
      borderSide: borderSide ?? this.borderSide,
      borderRadius: borderRadius ?? this.borderRadius,
      gapPadding: gapPadding ?? this.gapPadding,
    );
  }
}

修复点：

1. 调整绘制顺序，先绘基础边框再叠左侧色块，避免层级混乱；
2. 重写copyWith方法，确保自定义边框状态在组件重建时正确传递；
3. 处理输入框间隙区域，用背景色覆盖左侧色块对应部分，避免遮挡文字。

使用示例：

TextField(
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
    border: CustomInputBorder(
      leftBorderSideColor: Colors.red,
      borderRadius: BorderRadius.circular(4),
      borderSide: const BorderSide(color: Colors.grey),
    ),
    enabledBorder: CustomInputBorder(
      leftBorderSideColor: Colors.red,
      borderRadius: BorderRadius.circular(4),
      borderSide: const BorderSide(color: Colors.grey),
    ),
    focusedBorder: CustomInputBorder(
      leftBorderSideColor: Colors.red,
      borderRadius: BorderRadius.circular(4),
      borderSide: const BorderSide(color: Colors.blue),
    ),
  ),
)

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