Text widgets and styling with flutter

Flutter provides Text widgets with different styling and theming.
You can add simple text by using Text(‘Hello World‘).

Normal Text: This is default normal text without styling.

Text(
 'Normal Text',
),

Font Text: TextStyle property used to apply different styling to text. Here we use the ‘fontSize’ property under TextStyle and apply different sizes to our text. See example here.

Text(
 'Font Size 24',
 style: TextStyle(color: Colors.green, fontSize: 24),
),

Color Text: TextStyle property used to apply different styling to text.

Here we use the ‘color’ property under TextStyle and apply new color to our text. See example here.

Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.green),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.red),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[900]),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[800]),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[700]),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[600]),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[500]),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[400]),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[300]),
),
Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[200]),
),Text(
 'Change Color',
 style: TextStyle(fontSize: 24, color: Colors.blue[100]),
),

Bold Text: “fontWeight: FontWeight.bold” under TextStyle is used to make text bold. We can make text thin and thick by using w100, w200 etc. See example here.

Text(
     "Bold Text",
     style: Styles.textMedium(fontWeight: FontWeight.w900),
      ),

Italic Text: “fontStyle: FontStyle.italic” under TextStyle is used to make text italic. See example here.

Text(
     "Bold Text",
     style: Styles.textMedium(fontStyle: FontStyle.italic),
      ),

Shadow Text: We can apply different shadows with color and angle by using Shadow method. This method provides color, blurRadius, offset properties to make different shadow views.

By applying different integer values to blur radius you can make shadow from clear to blur scale. See example here.

 Text(
 'Shadow Text',
 style: TextStyle(
   color: Colors.black,
   fontSize: 22,
   shadows: [
     Shadow(color: Colors.black, blurRadius: 5),
   ],
 ),
),
Text(
 'Black Shadow with offset',
 style: TextStyle(
   color: Colors.black,
   fontSize: 22,
   shadows: [
     Shadow(
       color: Colors.black,
       blurRadius: 10,
       offset: Offset(5.0, 5.0),
     ),
   ],
 ),
),
Text(
 'Green Shadow with offset',
 style: TextStyle(
   color: Colors.black,
   fontSize: 22,
   shadows: [
     Shadow(
       color: Colors.green,
       blurRadius: 8,
       offset: Offset(5.0, 5.0),
     ),
   ],
 ),
),
Text(
 'Red Shadow with offset',
 style: TextStyle(
   color: Colors.black,
   fontSize: 22,
   shadows: [
     Shadow(
       color: Colors.red,
       blurRadius: 8,
       offset: Offset(2.0, -3.0),
     ),
   ],
 ),
),
Text(
 'Multi Color Shadow',
 style: TextStyle(
   color: Colors.black,
   fontSize: 22,
   shadows: [
     Shadow(
       color: Colors.green,
       blurRadius: 5.0,
       offset: Offset(-5.0, -5.0),
     ),
     Shadow(
       color: Colors.yellow,
       blurRadius: 5,
       offset: Offset(5.0, 5.0),
     ),
   ],
 ),
),

Background Text: We can apply different color backgrounds using “backgroundColor” properties under TextStyle. See example here.

Text(
 'Orange Background',
 style: TextStyle(
     color: Colors.white,
     fontSize: 28,
     backgroundColor: Colors.deepOrangeAccent),
),
Text(
 'Blue Background',
 style: TextStyle(
     color: Colors.white,
     fontSize: 28,
     backgroundColor: Colors.blue),
),
Text(
 'Green Background',
 style: TextStyle(
     color: Colors.white,
     fontSize: 28,
     backgroundColor: Colors.green),
),

Underline Text:
“decoration: TextDecoration.underline” property is used to draw the underline below text.

We can change line position by using underLine, ~~lineThrough~~ and overLine.

If you want to change color or your underline then use “decorationColor: Colors.red,” property under TextStyle method.

5 types of lines are available which are thick, double, wavy, dotted and dashed. You can define it with “decorationStyle: TextDecorationStyle.wavy” under the TextStyle method. See example here.

Text(
 'Solid Underline Text',
 style: TextStyle(
     color: Colors.black,
     fontSize: 24,
     decoration: TextDecoration.underline),
),
Text(
 'LineThrough Text',
 style: TextStyle(
   color: Colors.green,
   fontSize: 24,
   decoration: TextDecoration.lineThrough,
   decorationColor: Colors.red,
 ),
),
Text(
 'OverLine Text',
 style: TextStyle(
     color: Colors.blue,
     fontSize: 24,
     decoration: TextDecoration.overline,
     decorationColor: Colors.blue,
     decorationStyle: TextDecorationStyle.solid),
),
Text(
 'Thick Underline Text',
 style: TextStyle(
     color: Colors.purple,
     fontSize: 24,
     decoration: TextDecoration.underline,
     decorationColor: Colors.purple,
     decorationStyle: TextDecorationStyle.solid,
     decorationThickness: 3),
),
Text(
 'Double Underline Text',
 style: TextStyle(
     color: Colors.pink,
     fontSize: 24,
     decoration: TextDecoration.underline,
     decorationColor: Colors.pink,
     decorationStyle: TextDecorationStyle.double),
),
Text(
 'Wavy Underline Text',
 style: TextStyle(
     color: Colors.teal,
     fontSize: 24,
     decoration: TextDecoration.underline,
     decorationColor: Colors.teal,
     decorationStyle: TextDecorationStyle.wavy),
),
Text(
 'Dotted Underline Text',
 style: TextStyle(
     color: Colors.cyan,
     fontSize: 24,
     decoration: TextDecoration.underline,
     decorationColor: Colors.cyan,
     decorationStyle: TextDecorationStyle.dotted),
),
Text(
 'Dashed Underline Text',
 style: TextStyle(
     color: Colors.redAccent,
     fontSize: 24,
     decoration: TextDecoration.underline,
     decorationColor: Colors.redAccent,
     decorationStyle: TextDecorationStyle.dashed),
),

Word-Letter Spacing: TextStyle method providing “wordSpacing” and “letterSpacing” properties which allows you to display your texts with different spacing. See example here.

Text(
 'Word Spacing',
 style: TextStyle(
   fontSize: 24,
   color: Colors.black,
   wordSpacing: 5.0,
 ),
),
Text(
 'Letter Spacing',
 style: TextStyle(
   fontSize: 24,
   color: Colors.cyan,
   letterSpacing: 5.0,
 ),
),
Text(
 'Word-Letter Spacing',
 style: TextStyle(
     fontSize: 24,
     color: Colors.cyan,
     letterSpacing: 5.0,
     wordSpacing: 5.0),
),
Text(
 'Word-Letter Spacing',
 style: TextStyle(
     fontSize: 24,
     color: Colors.red,
     letterSpacing: 4.0,
     wordSpacing: 4.0),
),
Text(
 'Word-Letter Spacing',
 style: TextStyle(
     fontSize: 24,
     color: Colors.red,
     letterSpacing: 3.0,
     wordSpacing: 3.0),
),
Text(
 'Word-Letter Spacing',
 style: TextStyle(
     fontSize: 24,
     color: Colors.yellow,
     letterSpacing: 2.0,
     wordSpacing: 2.0),
),
Text(
 'Word-Letter Spacing',
 style: TextStyle(
     fontSize: 24,
     color: Colors.yellow,
     letterSpacing: 1.0,
     wordSpacing: 1.0),
),
Text(
 'Word-Letter Spacing',
 style: TextStyle(
     fontSize: 24,
     color: Colors.green,
     letterSpacing: 0.0,
     wordSpacing: 0.0),
),
Text(
 'Word-Letter Spacing',
 style: TextStyle(
     fontSize: 24,
     color: Colors.green,
     letterSpacing: -1.0,
     wordSpacing: -1.0),
),

Conclusion: This article is published to help with different text styles.

Thank you for reading this article. if you need any help then you can contact us on info@tagnism.com

Leave a Reply Cancel reply