Flutter问题：修复优惠券输入区按钮宽度及TextField边框样式

Problem 1: Button Width Abnormality #

Your button was wrapped in Expanded, which forced it to occupy half the row width and ignored your fixed width:100 setting.

Fix: Remove the Expanded widget around the button. This lets the button use the specified fixed width, matching the narrow button in your expected design.

Problem 2: TextField Border Style Mismatch #

Nested ClipRRect and conflicting border settings in TextFormField caused unexpected styling.

Fix:

1. Remove ClipRRect from the text field container – use the container's own decoration to set left-side rounded corners.
2. Disable all default borders on the TextFormField by setting border: InputBorder.none, focusedBorder: InputBorder.none, and enabledBorder: InputBorder.none.
3. Define the required left/top/bottom borders directly on the outer container, along with a white background to match the text field's fill.

Corrected Full Code #

Padding(
  padding: const EdgeInsets.only(left: 20.0, right: 20, top: 20),
  child: Row(
    children: <Widget>[
      Expanded(
        child: Container(
          height: 44,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(8),
              bottomLeft: Radius.circular(8),
            ),
            border: Border(
              left: BorderSide(
                color: MyColor.darkGreyColor,
                width: 1.0,
              ),
              top: BorderSide(
                color: MyColor.darkGreyColor,
                width: 1.0,
              ),
              bottom: BorderSide(
                color: MyColor.darkGreyColor,
                width: 1.0,
              ),
            ),
            color: MyColor.whiteColor,
          ),
          child: TextFormField(
            style: textStyleWith12400(MyColor.blackColor),
            onChanged: (value) {
              // if (value.length == maxLength) {
              //   FocusScope.of(context).unfocus();
              // }
            },
            decoration: InputDecoration(
              contentPadding: EdgeInsets.only(right: 12, top: 12, left: 12),
              isCollapsed: true,
              hintText: "Apply Coupon",
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              enabledBorder: InputBorder.none,
            ),
          ),
        ),
      ),
      GestureDetector(
        onTap: () {
          setState(() {});
        },
        child: Container(
          height: 44,
          width: 100,
          decoration: BoxDecoration(
            color: MyColor.primaryRedColor,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(8),
              bottomRight: Radius.circular(8),
            ),
            // Optional: Uncomment for a separation line between field and button
            // border: Border(
            //   left: BorderSide(
            //     color: MyColor.darkGreyColor,
            //     width: 1.0,
            //   ),
            // ),
          ),
          child: Center(
            child: Text(
              'APPLY',
              style: textStyleWith12500(MyColor.whiteColor),
            ),
          ),
        ),
      ),
    ],
  ),
)

Optional Adjustment #

If you want a thin grey separation line between the text field and button, uncomment the border settings in the button's decoration block.

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