Advertisements
I have an issue with aligning a add button to right side of the row.
I tried using SizedBox, MainAxisAlignment and increasing the width of buttons and containers, but it didn’t work.It’s moving to the left side instead and decreases the width of TextField.I guess it’s because of Flexible class i used to create Row with TextField
Widget buildParty() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
border: Border.all(width: 0.7, color: Colors.black38),
),
child: Row(
children: [
Container(
alignment: Alignment.center,
width: 30,
height: 60,
child: Text('$_prtnum'),
),
Flexible(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Participant')
),
),
ElevatedButton(onPressed: () {
setState(() {
if (_prtadd > 1)
--_prtadd;
});
}, child: Text('-', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.zero
),
alignment: Alignment.center,
backgroundColor: Colors.green[700],
minimumSize: Size(34, 10),
padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
),),
Container(
alignment: Alignment.center,
width: 35,
child: Text('$_prtadd'),
),
ElevatedButton(onPressed: () {
setState(() {
if (_prtadd < 8)
++_prtadd;
});
}, child: Text('+', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(topRight: Radius.circular(5), bottomRight: Radius.circular(5.0))
),
alignment: Alignment.center,
backgroundColor: Colors.green[700],
minimumSize: Size(34, 10),
padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
),)
],
),
),
);
}
>Solution :
You need to use this property in style of the right side button widget :
tapTargetSize: MaterialTapTargetSize.shrinkWrap
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5.0))),
alignment: Alignment.center,
backgroundColor: Colors.green[700],
minimumSize: Size(34, 10),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: EdgeInsets.symmetric(
vertical: 22,
horizontal: 0,
),
)
Hope it will help you