Widgets in a row not spacing themselves out evenly
125
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: () {},
),
),
),
),
],
),
),
),
],
),
Author by
Dfx11
Updated on December 26, 2022Comments
-
Dfx11 over 1 year
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.
-
Dfx11 over 3 yearsWorks if I want my widget to take up the whole screen's width but this helped me figure it out. I'd have to add a width parameter to my top level container and give the same width to the container you've specified. It involves hard coding the values but gets it done. Only if there was a way to resize it automatically according to the parent.