Text Widget

This widget is used to display string with single style.

Text("Hello World"),

Let's learn about some arguments that can be used to style the text and control different behaviour.

style

This argument can be used to specify the visual style of the text. The style definition can be defined by TextStyle class. We will learn more about TextStyle class leter.

maxLines

An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to the overflow behaviour.

maxLines : 1,
maxLines : 5, 

overflow

This argument controls the overflow behaviour of the text. The class TextOverflow canbe used to specify overflow behaviour. This class defines the following constants :

• clip : Clip the overflowing text to fix its container.
• ellipsis : Use an ellipsis to indicate that the text has overflowed.
• fade : Fade the overflowing text to transparent.
• visible : Render overflowing text outside of its container.

For example,

overflow : TextOverflow.visible,

textAlign

This argument is used to specify the alignment of the text. The TextAlign class can be used to specify the alignment. This class defines the following constant.

• center : Align the text in the center of the container.
• end : Align the text on the trailing edge of the container.
• justsify : Stretch lines of text that end with a soft line break to fill the width of the container.
• left : Align the text on the left edge of the container.
• right : Align the text on the right edge of the container.
• start : Align the text on the leading edge of the container.

For example,

textAlign : TextAlign.start,

Text.rich

The constructor Text() is used to style the text as a whole. It means the provided style is applied to all the text. But what if you want to apply different styles to different part of the text. For this purpose we can use Text.rich constructor. This constructor takes TextSpan argument as the first parameter.

Text.rich(
	TextSpan(
		Text : "Hello",
		children : [
			TextSpan(text : "Beautiful", style : TextStyle(...)),
			TextSpan(text : " World", style : TextStyle(...)),
		],
	),
),

We will learn more about TextSpan widget in later section.