flutter: how to fix button width and container textfield border?

Question

I want to create a apply coupon section , In this section i have used a textfield and Button, i want to set border only three side laft,top and bottom and right side will be a button.

This is my code.

  Padding(
              padding: const EdgeInsets.only(left: 20.0, right: 20, top: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Expanded(
                      child: ClipRRect(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(8),
                        bottomLeft: Radius.circular(8)),
                    child: Container(
                      decoration: BoxDecoration(
                        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,
                          ),
                        ),
                      ),
                      height: 44,
                      child: TextFormField(
                        // keyboardType: textInputType,
                        // focusNode: myFocusNode,
                        // controller: controller,
                        style: textStyleWith12400(MyColor.blackColor),
                        onChanged: (value) {
                          // if (value.length == maxLength) {
                          //   FocusScope.of(context).unfocus();
                          // }
                        },
                        // maxLength: maxLength ,
                        decoration: InputDecoration(
                          filled: true,
                          fillColor: MyColor.whiteColor,
                          contentPadding:
                              EdgeInsets.only(right: 12, top: 12, left: 12),
                          isCollapsed: true,
                          hintText: "Apply Coupon",
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                style: BorderStyle.none,
                                width: 2,
                                // color: myFocusNode.hasFocus || controller.text.isNotEmpty
                                //     ? MyColor.darkGreyColor
                                //     : MyColor.greyColor,
                                color: MyColor.greyColor),
                            borderRadius: BorderRadius.circular(8.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                style: BorderStyle.none,
                                width: 2,
                                // color: myFocusNode.hasFocus || controller.text.isNotEmpty
                                //     ? MyColor.darkGreyColor
                                //     : MyColor.greyColor,
                                color: MyColor.greyColor),
                            borderRadius: BorderRadius.circular(8.0),
                          ),
                        ),
                      ),
                    ),
                  )),
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        setState(() {});
                      },
                      child: ClipRRect(
                          borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(8),
                            bottomRight: Radius.circular(8),
                          ),
                          child: Container(
                            height: 44,
                            width: 100,
                            decoration: BoxDecoration(
                              color: MyColor.primaryRedColor,
                              border: Border(
                                left: BorderSide(
                                  color: MyColor.redLightColor,
                                  width: 1.0,
                                ),
                              ),
                            ),
                            child: Center(
                              child: Text(
                                'APPLY',
                                style: textStyleWith12500(
                                  MyColor.whiteColor,
                                ),
                              ),
                            ),
                          )),
                    ),
                  ),
                ],
              ),
            )

This is what I want my UI to look like:

This is what I currently have:

score 1 · Accepted Answer · answered Feb 23 '23 at 10:25

1

Remove the second Expanded widget inside the Row.
Change the mainAxisAlignment of the Row to start (or remove all together).

Pretty sure this will force your left-most Expanded widget to take up the full space, and press up against your button as you desire.

answered Feb 23 '23 at 10:25

Matthew Trent

2,611
1
17
30

thank you button issue has been fixed but what i do for border ? which is used for textfield. – Deepak Feb 23 '23 at 10:32
If this solution worked, please accept it for users in the future. What do you want changed with the border? – Matthew Trent Feb 23 '23 at 10:33
see apply coupon textfield border -> left side corner in second image – Deepak Feb 23 '23 at 10:36
Move your `Border` from inside the `Row` to outside the `Row`, where it should be placed inside a `Container` that wraps the `Row`. Then, add some `borderRadius` to the wrapping `Container`. – Matthew Trent Feb 23 '23 at 10:45

Dheeraj Prajapat · Answer 2 · 2023-02-23T11:00:31.170

This code is useful for you! try this

   Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey,
                ),
                borderRadius: BorderRadius.circular(5),
              ),
              height: 50,
              margin: EdgeInsets.symmetric(horizontal: 30),
              child: ClipRRect(
                child: Expanded(
                  child: Row(
                    children: [
                      Expanded(
                          child: TextFormField(
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.only(left: 10)),
                      )),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.redAccent,
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(5),
                              bottomRight: Radius.circular(5)),
                        ),
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(horizontal: 8),
                        child: InkWell(
                            child: Text(
                          'Apply Coupon',
                          style: TextStyle(color: Colors.white),
                        )),
                      )
                    ],
                  ),
                ),
              ),
            ).   '''

flutter: how to fix button width and container textfield border?

2 Answers2