19 December 2024 Leave a comment Tech-Help
Underlining text in Flutter can be achieved using the TextStyle class within the Text widget. This guide will walk you through the process of underlining text, as well as customizing the underline style for more advanced needs.
Basic Underlining
To underline an entire text string, you can utilize the TextDecoration.underline property within a TextStyle:
Text(
'Hello world',
style: TextStyle(
decoration: TextDecoration.underline,
),
)Partial Underlining with Rich Text
If you need to underline only a portion of the text, you can use Text.rich() or a RichText widget. This method allows you to break the string into TextSpans, where each span can have its own style:
Text.rich(
TextSpan(
text: 'Hello ',
style: TextStyle(fontSize: 50),
children: [
TextSpan(
text: 'world',
style: TextStyle(
decoration: TextDecoration.underline,
)),
],
),
)Customizing the Underline Style
You can further customize the underline using TextDecorationStyle. Here are some examples:
- Dashed:
Text( 'Hello world', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed, ), ) - Dotted, Double, Wavy:
Text( 'Hello world', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dotted, ), )
Advanced Techniques
For more control over the appearance of the underline, such as adjusting the distance between text and underline, consider using a Container with a bottom border:
Container(
padding: EdgeInsets.only(
bottom: 5, // Space between underline and text
),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(
color: Colors.amber,
width: 1.0, // Underline thickness
))
),
child: Text(
"Forgot Password?",
style: TextStyle(
color: Colors.black,
),
),
)Conclusion
Underlining text in Flutter is straightforward, yet offers a range of customization options to fit your design needs. Whether using simple text decorations or advanced styling techniques, you have the flexibility to implement exactly what you envision.
Enhancing Your Testing Workflow
When developing mobile applications, ensuring consistent UI behavior is crucial. This is where Repeato, a no-code test automation tool for iOS and Android, becomes invaluable. Repeato allows developers to create, run, and maintain automated tests efficiently, leveraging computer vision and AI. This ensures that any UI changes, such as text decorations, do not introduce unexpected issues. For more on testing techniques, explore our Flutter Test Automation resources.
