Flutter Text Widget

In Flutter the Text widget is used to display single or multi-line string in UI. If we don’t specify any styling in a text widget, it will use DefaultTextStyle.

In this tutorial, you will learn how to efficiently use the Text widget and how to style the text widget using the style property. Here a simple example of Text Widget.

Text("This is a Text Widget"),

When we run this code, we will get output like this,

Text Widget Constructor

const Text(String data,{  
    Key key,  
    TextStyle style,  
    StrutStyle strutStyle,  
    TextAlign textAlign,  
    TextDirection textDirection,  
    TextOverflow overflow,  
    bool softWrap,  
    double textScaleFactor,  
    int maxLines,  
    String semanticsLabel,  
    TextWidthBasis textWidthBasis,  
    TextHeightBehavior textHeightBehavior  
    }  
)  

• TextAlign: It is used to control the text horizontally.
• TextDirection: It is used to control The direction in which text flows.
• TextOverflow: It is used to handle the overflow text.
• softWrap: if enough space is available it shows all content, otherwise it does not show all content.
• maxLines: It is used to determine the maximum number of lines displayed in the text widget.
• TextWidthBasis: It defines how to measure the width of the rendered text.
• TextHeightBehavior: It defines how the paragraph will apply TextStyle.height to the ascent of the first line and descent of the last line.
• style: It is the most popular property of the Text Widget. It is used to customize the fontSize, fontWeight, color, etc.

Most popular properties of TextStyle is,

color	It is used to change the color of the font.
fontSize	It is used to change the size of the text.
backgroundColor	It is used to change background color of the text.
fontFamily	It is used to specify the typeface for the font.
letterSpacing	It is used to change the distance between the characters of the text.
wordSpacing	It is used to specify the distance between two words of the text.
shadows	It is used to paint underneath the text.

Flutter Text Widget Line Break

If you have multiline text, to break the text at specific word use \n escape character. For example,

Text("This is a Text Widget \n by Code With Flutter"),

Flutter Text Overflow

Sometimes text overflowed because of not specifying the width of the widget. To solve the text-overflow problem, use the overflow property. Here an example of overflow property.

Text(
"When using long text, sometimes text overflowed some pixels. To sole this",
overflow: TextOverflow.ellipsis,
),

Using the overflow: TextOverflow.ellipsis property, it will append three dots at end of the text. Here is an output of the code.

Flutter Text underline

To use underlined text in flutter, we should use TextStyle decoration property. Here is an example of text underline property,

Text(
  'Code With Flutter',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Home(title: 'Flutter Text Widget'),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body:Center(
        child: Text(
          'Code With Flutter',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.blue,
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            backgroundColor: Colors.greenAccent[200],
            fontStyle: FontStyle.italic,
            letterSpacing: 8,
            wordSpacing: 10,
              shadows: [
                Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:7)
              ]
          ),
        ),
      ),

    );
  }
}

Output