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