How to Evenly Space Icons and Text Inside a RichText Widget in Flutter?

Question

I'm working on a Flutter application using Dart and I've encountered a specific UI design challenge. My goal is to achieve a layout where icons and text are evenly spaced within a RichText widget. Below are images illustrating my current design and the desired outcome.

Current Design:

Desired Outcome:

As illustrated, I'm trying to separate the icons and text to match the desired layout. However, I've been unable to add spacing within the RichText widget to achieve this effect.

Here's the code snippet I'm working with:

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)),
          ),
        ],
      ),
    ),
  ],
),

I've attempted to modify the TextSpan and WidgetSpan elements to include padding or margin, but neither seem applicable in this context. Additionally, I've reviewed similar questions and documentation but haven't found a solution that applies to spacing within a RichText widget.

How can I add space between the icons and the text in this RichText widget to achieve the desired layout?

Thank you for your assistance.

Answer 1

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)),
],
),