Text widget displays String of text with single text style. The string might be shown in a single line or multiple lines based on layout constraints.
Constructor:
const Text(
String data,
{
Key? key,
TextStyle? style,
StrutStyle? strutStyle,
TextAlign? textAlign,
TextDirection? textDirection,
Locale? locale,
bool? softWrap,
TextOverflow? overflow,
double? textScaleFactor,
int? maxLines,
String? semanticsLabel,
TextWidthBasis? textWidthBasis,
TextHeightBehavior? textHeightBehavior,
}
)
textAlign: This property aligns text horizontally. TextAlign comes with 7 different constants. start, end, left, right, center, justify and values.
style: style property applies text style to the widget. It includes fontSize, color, fontFamily etc.
textDirection: This property is used to specify text direction inside Text widget. We can specify the ltr(left to right) or rtl(right to left) text direction. Default value is ltr. But rtl can be used when you are building apps that support languages like Arabic.
maxLines: This property is used to restrict maximum no of lines displayed in Text widget.
softWrap: This property is used to determine whether content of the Text widget should be shown on multiple lines if it requires more space than one line or need to be shown in a single line only. Its default value is true. If we set its value to be false then its content will be trimmed and shown in a single line only.
overflow: overflow occurs when content exceeds its boundary. overflow property is used to set behaviour of the content when overflow occurs.
TextOverflow.ellipsis: It clips out the content when overflow occurs but it shows dots … to indicate that there is more content.
TextOverflow.clip: It clips out the content when overflow occurs.
TextOverflow.fade: It fades out the content when overflow occurs.
TextOverflow.visible: It shows the content over other widgets in its path when overflow occurs.
textScaleFactor: This property determines the text scaling factor of the text widget. If it's 1.5 then the text will be 50% larger than the specified font size.
Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mollis magna. Nam non odio quis ligula commodo tempor. Praesent.',
textAlign: TextAlign.justify,
),
![](../flutter/images ext_1.PNG)
Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mollis magna. Nam non odio quis ligula commodo tempor. Praesent.',
softWrap: false,
),
![](https://www.droidbiz.in/flutter/images ext_2.PNG)
Text(
'Welcome to DroidBiz',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.blue,
fontStyle: FontStyle.normal,
backgroundColor: Colors.grey,
letterSpacing: 8,
wordSpacing: 16
),
textAlign: TextAlign.center,
),
![](https://www.droidbiz.in/flutter/images ext_3.PNG)
This widget is used to show text with multiple styles. It shows tree of TextSpan objects with different styles. The text might be shown in a single line or multiple lines based on layout constraints.
Constructor:
RichText(
{
Key? key,
required InlineSpan text,
TextAlign textAlign,
TextDirection? textDirection,
bool softWrap,
TextOverflow overflow,
double textScaleFactor,
int? maxLines,
Locale? locale,
StrutStyle? strutStyle,
TextWidthBasis textWidthBasis,
TextHeightBehavior? textHeightBehavior
}
)
Example:
RichText(
text: TextSpan(
text: 'Don\'t have an account?',
style: TextStyle(color: Colors.black, fontSize: 18),
children: <TextSpan>[
TextSpan(
text: ' Sign up',
style: TextStyle(color: Colors.blueAccent, fontSize: 18),
),
],
),
)
![](https://www.droidbiz.in/flutter/images ext_4.PNG)