Widgets in a row not spacing themselves out evenly

Issue

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.

Here's an image of what I've described and managed to achieve so far

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.

Solution

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: () {},
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        ),
                    ],
                  ),

Answered By – Suthura Sudharaka

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *