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

Advertisements

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:

>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.

Leave a ReplyCancel reply