The vertical space between the two text widgets is more than I like. I haven’t added any padding or margin. Can it be reduced somehow? Here’s the code:
Container(
margin: EdgeInsets.only(top: 60, left: 30),
alignment: Alignment.centerLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(bottom: 1),
child:MyText(text: "Total Views", size: 32, weight: FontWeight.w600, color: Color(0x66FFFFFF),),
),
//SizedBox(height: 1,),
MyText(text: "89000", size: 50, weight: FontWeight.w600,),
MyText(text: "Total Likes", size: 32, weight: FontWeight.w600, color: Color(0x66FFFFFF),),
MyText(text: "4800", size: 50, weight: FontWeight.w600,),
],
),
),
The widget:
class MyText extends StatelessWidget {
Color? color;
final String text;
double? size;
FontWeight? weight;
MyText({super.key,this.color = const Color(0xDEFFFFFF), required this.text, this.size=32, this.weight= FontWeight.w400});
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
color: color,
fontSize: size,
fontWeight: weight,
fontFamily: 'Poppins'
),
);
}
}
I want to reduce the space between ‘Total Views’ and ‘89000’ and the space between ‘Total Likes’ and ‘4800’.
Marked in red here:
I tried putting a padding to force the space between to a lower setting but that didn’t do anything. I tried setting the mainAxisSize to minimum but that didn’t do anything either.
I tried using stack (below)
Container(
margin: EdgeInsets.only(top: 60, left: 30),
alignment: Alignment.centerLeft,
child: Stack(
children: [
Container(
margin: EdgeInsets.only(bottom:50),
child:MyText(text: "Total Views", size: 32, weight: FontWeight.w600, color: Color(0x66FFFFFF),),
),
MyText(text: "89000", size: 50, weight: FontWeight.w600,),
MyText(text: "Total Likes", size: 32, weight: FontWeight.w600, color: Color(0x66FFFFFF),),
MyText(text: "4800", size: 50, weight: FontWeight.w600,),
],
),
)
But that just put everything on top of each other and even adding the margin couldn’t force some space between them.
Result of using stack:
Finally, I tried reducing the top margin value I mentioned for the container but as expected that only moved the entire container up and didn’t do anything to the elements inside. Is there any way to reduce this space?
2
Answers
Try below code and remove Padding Widget, I have used Column
Result Screen->
You can adjust the height of the Text by setting TextStyle’s height.
This is the result I obtained by setting the parameter
height
to 1.If I set the
height
to 0.8, the result would be like this.