flutterflutter-designflutter-debug

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


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: enter image description here

This is what I currently have: enter image description here


Solution

    1. Remove the second Expanded widget inside the Row.
    2. 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.