Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading