Flutter Text
Text widget allows us to display a string of text in our app. If we do not declare any styling to the text widget, this widget will use the style from the DefaultTextStyle class. It doesn’t have any explicit style. In this article, we are discussing how to use and style Text widget in our application.
Lets see a simple example to understand the widget.
import 'package:flutter/material.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text("Welcome to Javatpoint")
),
);
}
}
In the above code, we used the MyTextPage() class as the home in MaterialApp widget. This class contains the scaffold widget, which has an appBar and a body where we have added the Text widget to show the title and body on the screen, respectively. It is a simple scenario in which we are using the Text widget to display on our page.
Output:
Text Widget Constructor:
The text widget constructor uses these properties to make the style the look and feel of our text:
const Text(String data,{
Key key,
TextStyle style,
StrutStyle strutStyle,
TextAlign textAlign,
TextDirection textDirection,
TextOverflow overflow,
bool softWrap,
double textScaleFactor,
int maxLines,
String semanticsLabel,
TextWidthBasis textWidthBasis,
TextHeightBehavior textHeightBehavior
}
)
TextAlign: TextAlign specifies how our text is aligned.
TextDirection: TextDirection determines how textAlign values control the layout of the text.
Overflow: Overflow determines what to do when the text will not fit in the available space.
Style: It is the most used property of the widget which allows us to style our text. We can change foreground and background color, font size, font weight, letter and word spacing, locale, shadows, etc.
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text(
"Hello World! This is a Text Widget.",
style: TextStyle(
fontSize: 35,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
letterSpacing: 8,
wordSpacing: 20,
backgroundColor: Colors.yellow,
shadows: [
Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10)
]
),
)
),
);
}
}
Output
