How can I fill horizontal space in flutter? - flutter

Question

Column(
children: [
Padding(
padding: const EdgeInsets.only(
left: 15, bottom: 8, top: 1),
child: Row(
//crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisAlignment: MainAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ITEM NAME
Padding(
padding: const EdgeInsets.only(
left: 10, top: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
'${restaurantItems[i].name}',
style: TextStyle(
fontSize: 17,
color: kTextColor,
fontWeight: FontWeight.w700),
),
SizedBox(
width: width / 2,
),
// 'ADD' BUTTON CONTAINER
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(8),
color: Colors.black87,
),
child: Padding(
padding: const EdgeInsets.only(
left: 9,
top: 3,
right: 5,
bottom: 3),
child: InkWell(
splashColor: Colors.white,
onTap: () {
// print(restaurantItems[i].name);
cart.addItem(
restaurantItems[i].id,
restaurantItems[i].name,
restaurantItems[i].price,
restaurant,
);
},
child: Row(
children: [
Text(
'ADD',
style: TextStyle(
color: Colors.white,
),
),
Icon(
Icons.add,
color: Colors.white,
size: 17,
),
],
),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 10, top: 10, bottom: 11),
child: Text(
'₹${restaurantItems[i].price}',
style: TextStyle(
fontSize: 15,
color: kTextColor,
fontWeight: FontWeight.w500),
),
),
// Padding(
// padding: const EdgeInsets.only(
// left: 17, top: 17),
// child: InkWell(
// onTap: () {
// // Add to Cart
// },
// child: Row(
// children: [
// Padding(
// padding:
// const EdgeInsets.only(left: 15),
// child: Text(
// '${restaurantItems[i].quantity} Left',
// style: TextStyle(
// color: kTextLightColor,
// fontSize: 13,
// fontWeight: FontWeight.w700),
// ),
// )
// ],
// ),
// ),
// )
],
),
],
),
),
],
),
How can I fill the space between 'ITEM NAME' and 'ADD CONTAINER'? I have tried spacer(), but it doesn't work. Also, I have seen Expanded() widget but since I am new to flutter, I can't seem to get a hang of it. I have also added the Column widget, because of which the Spacer() widget is not working I guess.
Any help would be appreciated, thanks.

Answer 1

Use SizedBox widget between 'ITEM NAME' and 'ADD CONTAINER'. for example:
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(left: 10, top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'test',
style: TextStyle(
fontSize: 17,
color: Colors.black,
fontWeight: FontWeight.w700),
),
// Spacer()
SizedBox(width: width/2,)
// 'ADD' BUTTON CONTAINER
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.black87,
),
child: Padding(
padding:
const EdgeInsets.only(left: 9, top: 3, right: 5, bottom: 3),
child: InkWell(
splashColor: Colors.white,
onTap: () {
// print(restaurantItems[i].name);
// cart.addItem(
// restaurantItems[i].id,
// restaurantItems[i].name,
// restaurantItems[i].price,
// restaurant,
// );
},
child: Row(
children: [
Text(
'ADD',
style: TextStyle(
color: Colors.white,
),
),
Icon(
Icons.add,
color: Colors.white,
size: 17,
),
],
),
),
),
),
],
),
),));
}

Answer 2

For providing space between widgets you can use SizedBox(width:10)

Answer 3

Use Spacer() to fill the space if you don't want to define size of width

Answer 4

Wrap your Column with ConstrainedBox and set the constraints value to BoxConstraints.expand(). The idea:
body: ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [const Text('ITEM NAME='), ElevatedButton(onPressed: () {}, child: const Text('ADD'))])
]))

Answer 5

Try this:
Text(
'${restaurantItems[i].name}',
style: TextStyle(
fontSize: 17,
color: kTextColor,
fontWeight: FontWeight.w700,
),
),
Spacer(flex: 1),
// 'ADD' BUTTON CONTAINER
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.black87,
),
child: Padding(
padding: const EdgeInsets.only(
left: 9,
top: 3,
right: 5,
bottom: 3,
),
child: InkWell(
splashColor: Colors.white,
onTap: () {
// print(restaurantItems[i].name);
cart.addItem(
restaurantItems[i].id,
restaurantItems[i].name,
restaurantItems[i].price,
restaurant,
);
},
child: Row(
children: [
Text(
'ADD',
style: TextStyle(
color: Colors.white,
),
),
Icon(
Icons.add,
color: Colors.white,
size: 17,
), // Icon
], // <Widget>[]
), // Row
), // InkWell
), // Padding
), // Container
Spacer(flex: 4),