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.
