Text Widget – Flutter Widget Guide By Flutter Agency

What is a Text Widget?

Text Widget allows you to display text in your Flutter application. In this article, we will see how to use a Text Widget in your application along with how to style a Text Widget with references to a detailed article.

Code Snippet to use Text Widget will look like below :

 Text("Text widget")

Which will give us output like below :

Text Widget

Text styling with the Text :

Users can apply the style which includes properties like font size, font type, font-weight, color, decoration, background color, etc.

Code Snippet to apply style is as below :

 style: TextStyle(
           property1,
           property2
);

Suppose, We apply a style to text by applying Color and font size to like below :

 style: TextStyle(
              color: Colors.redAccent,
              fontSize: 27,
            ),

We will get output like below :

Style to a Text 

Color to a Text 

There are multiple ways to apply color to Text Widget like as listed below :

1. Inbuilt Colors like color: Colors.blue
2. using ARGB (Alpha Red Green Blue) like color: Color.fromARGB(255, 255, 0, 0),
3. using RGBO (Red Green Blue Opacity) like color: Color.fromRGBO(0, 155, 0, 0.8),

• Text size

To apply size to the Text Widget user can make use of fontSize property is used.

Code Snippet for it is as below :

  fontSize: 27,

When fontSize is not given, the default size is 14 logical pixels. Logical pixels are independent of a device’s density. That is, the text should appear to be basically the same size no matter what the pixel density of a user’s device may be.

• Bold :

To apply the bold property to fontWeight property is used. Code Snippet will look like below :

fontWeight: FontWeight.w600,

Users can set the weight with numbers like FontWeight.w100 where w400 is the same as normal and w700 is the same as bold.

• Italic:

To apply Italic property to Text Widget fontStyle Property is used. Code Snippet will look like below :

fontStyle: FontStyle.italic,

The only choices are italic and normal.

• Shadow :

To apply Shadow to Text Shadow property is used. Code Snippet will look like below :

 shadows: [
        Shadow(
          blurRadius: 10.0,
          color: Colors.blue,
          offset: Offset(5.0, 5.0),
        ),
      ],

• Underline :

To apply underline to Text property as listed below is used. Code Snippet will like as follows :

      decoration: TextDecoration.underline,
      decorationColor: Colors.black,
      decorationStyle: TextDecorationStyle.solid,

The decoration can be underline, line-through, or overline. The last line of text in the image above has an overline.

The choices available for decorationStyle are solid, double, dashed, dotted, and wavy.

• Spacing :

To apply Spacing in Text letterSpacing and wordSpacing property is used. Code Snippet will be like below :

 TextStyle(
      letterSpacing: -1.0,
      wordSpacing: 5.0,
    )

• Font Type :

To add various types of fonts used in a project User need to follow the instruction as listed below :

1. Add a directory called assets to the root of your project.
2. Copy a font into it.
3. In pubspec.yaml register the font below :

flutter:
      fonts:
      - family: DancingScript
        fonts:
        - asset: assets/dancing_script.ttf

4. Use the font in the Text. Code Snippet will look like below :

fontFamily: 'DancingScript',

Our final output will look like below :

Text with Style

Still, Facing any issue regarding Flutter Development?

Do not hesitate to Contact Us.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.