Widgets in a row not spacing themselves out evenly - flutter

Question

I'm trying to make a widget to display posts by users on a social media platform, I have certain elements I want to include in the post, one of them being the external links he might have attached while creating the posts.
I want these links to be represented by rounded buttons(which I've managed to achieve through the use of ClipOval) and I want these ovals to be in a row spaced evenly from the center.
So far, the only way I've been able to space them out is by adding SizedBox(s) of a certain width. But this is not efficient for different posts may differ in the number of links and thus the number of Ovals. This would look messy then.
I have overlaid the row on top of the post's image(to which I've applied a linear gradient to make the buttons visible) using a stack.
Here's my code
class postTemplate extends StatelessWidget {
List <String> tags = ['tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8'];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(height: 150,),
Container(
height: 450,
child: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: 20,),
Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32)
),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
ListTile(
title: Padding(
padding: const EdgeInsets.only(left : 70.0),
child: Text("Username"),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 10.0,left: 80.0),
child: Text("Hello"),
),
),
Stack(
children: [
Container(
child: Container(
foregroundDecoration:BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.transparent],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
stops: [0, 0.3],
),),
child: Image(image: AssetImage('assets/images/modelPostImage.png'),fit: BoxFit.contain,)),
),
Positioned(
bottom: 10.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width: 15,),
Container(
width: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
SizedBox(width: 15,),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
SizedBox(width: 15,),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
],
),
),
],
),
Container(
height: 44,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(22))
),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: tags.length,
itemBuilder: (BuildContext context, int index){
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
border: Border.all(color: Colors.black)
),
margin: EdgeInsets.only(right: 13, left: 13),
child: Padding(
padding: const EdgeInsets.only(
top: 10.0, bottom: 5.0, right: 20, left:20
),
child: Text(tags[index],
style: TextStyle(
color: Colors.black
),),
),
);
},
),
),
],
),
)
],
),
CircleAvatar(
radius: 42,
backgroundImage: AssetImage('assets/Icons/profileLogo.jpg')
)
],
),
),
],
),
);
}
}
Any help would be appreciated.

Answer 1

Wrap with a container and give it full width and remove sizing
Positioned(
bottom: 10.0,
child: Container(
width:MediaQuery.of(context).size.width,
child :Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
],
),
),
),
],
),

Answer 2

There is a specialized widget to create even space instead of using SizedBox. Replace SizedBox with Spacer.