skip to Main Content

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


  1. Try below code and remove Padding Widget, I have used Column

    Container(
            margin: EdgeInsets.only(top: 60, left: 30),
            alignment: Alignment.centerLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                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,),
              ],
            ),
          ),
    

    Result Screen-> image

    Login or Signup to reply.
  2. 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.

    height:1

    TextStyle(
            color: color,
            fontSize: size,
            fontWeight: weight,
            fontFamily: 'Poppins',
            height: 1,
          )
    

    If I set the height to 0.8, the result would be like this.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search