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,
),
),
),
)),
),
),
],
),
)
Expanded
widget inside the Row
.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.