Flutter Text Widget

Text widget in Flutter is used for Styled text for your app, it’s like TextView in Android. Below is the syntax for creating a Text widget in Flutter. The first value is String text which you want to show, with the help of style you can define TextStyle, font size, etc.

Text(
 'UserName',
 style: TextStyle(
   fontSize: 20.0,
   fontWeight: FontWeight.bold,
 ),
)

Properties of Text Widget

There are many properties available for Text Widget, some are explained below.

Style

You can define TextStyle using this widget, like fontSize, fontWeight, fontFamily, color, wordSpacing, backgroundColor, height, background, etc. understand it through the below code snippet.

child: Text(
 'This is the example for Text',
 style: TextStyle(
     color: Colors.black,
     fontSize: 12.0,
     fontStyle: FontStyle.italic),
),

TextDirection

Using this property you can define the direction of Text, suppose you want the text from Right to Left, so you can simply use this property, as like below code.

Text(
 'This is the example for Text',
 textDirection: TextDirection.rtl,
 style: TextStyle(
     color: Colors.black,
     fontSize: 12.0,
     fontStyle: FontStyle.italic),
)

TextAlign

Using this property you can align your text, whether you want to align it from start, end, center. Check the below code.

Text(
 'This is the example of Text Widget',
 textAlign: TextAlign.center,
 style: TextStyle(
     color: Colors.black,
     fontSize: 20.0,
     fontWeight: FontWeight.bold),
)

MaxLines

Using this property you can set maximum lines for your Text Widget. Go through with the below code for this property.

Text(
 'This is the example of Text Widget',
 textAlign: TextAlign.center,
 maxLines: 2,
 style: TextStyle(
     color: Colors.black,
     fontSize: 20.0,
     fontWeight: FontWeight.bold),
)

Complete Example

Now let’s see a complete example of this TextWidget.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'Text Example'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 MyHomePage({Key? key, required this.title}) : super(key: key);
 final String title;

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: Container(
         alignment: Alignment.center,
         padding: EdgeInsets.all(10.0),
         child:
         Text(
           'This is the example of Text Widget',
           textAlign: TextAlign.center,
           maxLines: 2,
           style: TextStyle(
               color: Colors.black,
               fontSize: 20.0,
               fontWeight: FontWeight.bold),
         ),
       ));
 }
}

Output

Below is the output of the above example, You can check how our Text is looking.