Flutter: How to add spaceEvenly to richText widget?

Issue

My question is about flutter and dart language

I have this design:

enter image description here

And, I want to achieve this:

enter image description here

As you can see the icons and text it is separated

This is my code:

 Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                      children: [
                                        RichText(
                                          text: TextSpan(
                                            style: GoogleFonts.questrial(),
                                            children: [
                                              WidgetSpan(
                                                child: Icon(FontAwesomeIcons.checkDouble,
                                                    size: 40,
                                                    color: Color(0xffD7D7D7)),
                                              ),
                                              TextSpan(
                                                  text: "Timer",
                                                  style: GoogleFonts.questrial(
                                                    textStyle: TextStyle(
                                                      fontSize: 20,
                                                      fontWeight: FontWeight.normal,
                                                      color:Color(0xff3B3B3B),
                                                    ),
                                                  )
                                              ),
                                              WidgetSpan(
                                                child: Icon(FontAwesomeIcons.squareXmark,
                                                    size: 40,
                                                    color: Color(
                                                        0xffD7D7D7)),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),

How to add some space between icons and text?

Thank you in advance.

Solution

Instead of RichText please use Row like

Row(         
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [                                   
  Icon(FontAwesomeIcons.checkDouble,size: 40, color: Color(0xffD7D7D7)),
 Text("Timer", textStyle: TextStyle(                                                 
  fontSize: 20,
  fontWeight: FontWeight.normal,                         
  color:Color(0xff3B3B3B),
 ),                                               
),
Icon(FontAwesomeIcons.squareXmark, size: 40,                                             color: Color(0xffD7D7D7)),
],
),

Answered By – Kaushik Chandru

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published