Text Widget
The Text widget in Flutter is used to display a short piece of text on the screen. It's a basic building block for creating user interfaces that involve text elements. Here's a detailed explanation of how to use the Text widget in Flutter:
1.Import the necessary package:
import 'package:flutter/material.dart';
2.Create a Text widget:
Text(
'Hello, Flutter!',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
)
In the above example, we create a Text widget with the text content "Hello, Flutter!". We also provide a TextStyle object to define various visual properties of the displayed text. In this case, we set the font size to 24.0 and the font weight to bold.
3.Customize the TextStyle:
style: TextStyle( color: Colors.blue, fontSize: 24.0, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, decoration: TextDecoration.underline, ),
You can customize various aspects of the text style using properties like color (for the text color), fontSize (for the font size), fontWeight (for the font weight), fontStyle (for italic or normal text), and decoration (for underlining or striking through the text).
4.Align the text:
textAlign: TextAlign.center,
The textAlign property allows you to align the text within the available space. You can set it to TextAlign.center for center alignment, TextAlign.left for left alignment, or TextAlign.right for right alignment.
5.Limit the number of lines:
maxLines: 2, overflow: TextOverflow.ellipsis,
If you want to limit the number of lines the text can occupy, you can set the maxLines property. Additionally, you can specify the behavior when the text overflows its allotted space using the overflow property. In the example above, we use TextOverflow.ellipsis to show an ellipsis when the text exceeds the specified number of lines.
6.Use different text spans:
Text.rich(
TextSpan(
text: 'Hello, ',
style: TextStyle(fontSize: 16.0),
children: <TextSpan>[
TextSpan(
text: 'Flutter',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
TextSpan(text: '!'),
],
),
)
If you want to apply different styles or behaviors to different parts of the text, you can use the Text.rich constructor and define multiple TextSpan children. Each TextSpan represents a portion of the text with its own style properties.
These are some of the commonly used features of the Text widget in Flutter. By combining the Text widget with other widgets, you can create more complex user interfaces and layouts.
Constructors:
Certainly! The Text widget in Flutter has several constructors that allow you to customize the appearance and behavior of the text. Let's explore the Text constructor in detail:
Text( 'Hello, Flutter!',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
softWrap: true,
textScaleFactor: 1.2,
textDirection: TextDirection.ltr,
locale: Locale('en', 'US'),
)
The first parameter of the Text constructor is the text content itself. In this example, we pass the string 'Hello, Flutter!' as the text to be displayed.
The style parameter is used to define the appearance of the text. You provide a TextStyle object that specifies properties such as fontSize (for the font size), fontWeight (for the font weight), color (for the text color), fontStyle (for italic or normal text), decoration (for underlining or striking through the text), and more. In the example above, we set the font size to 24.0 and the font weight to bold.
The textAlign parameter allows you to align the text within the available space. You can set it to TextAlign.center for center alignment, TextAlign.left for left alignment, or TextAlign.right for right alignment.
To limit the number of lines the text can occupy, you can use the maxLines parameter. By default, it is set to 1. You can increase it to display multiple lines of text. If the text exceeds the specified number of lines, you can define the overflow behavior using the overflow parameter. In the example, we set TextOverflow.ellipsis to display an ellipsis (...) when the text overflows.
The softWrap parameter determines whether the text should wrap to the next line when it reaches the end of the available space. If set to true, the text wraps; if set to false, the text continues on the same line and may be clipped.
The textScaleFactor parameter allows you to scale the text size by a given factor. For example, if you set it to 1.2, the text will be 1.2 times larger than the default size.
The textDirection parameter specifies the reading direction of the text. It can be set to TextDirection.ltr for left-to-right reading or TextDirection.rtl for right-to-left reading.
You can specify a particular Locale for the text using the locale parameter. This allows Flutter to localize the text and adapt it to different languages and regions. In the example, we set the Locale to English (US).
These are the main parameters of the Text constructor in Flutter. By adjusting these parameters, you can create visually appealing and dynamic text elements within your Flutter applications.
