What is the Text?
This problem is very fooling but needs to know, The text show our string and it also is a widget in the flutter, we can use it as a common widget, so be careful about their parameters.
Facebook Page | GitHub | | |
Flutter Open | NieBin | NieBin | |
Before start
In the widgets 01, we create a page to show our container, also we create a page show our Text
. The way of creating a page is the same as before, you do not care about this, you just focus on the Text
widget now. We will put them all in the children
as follows.
class TextPage extends StatefulWidget {_TextState createState() => _TextState();}class _TextState extends State<TextPage> {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Text"),),body: SingleChildScrollView(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text("Hello World"),],),),);}}
Then, we can put our Text into the children
to continue our tutorial.
Constructor
You must make a custom to look at the constructor of the widgets before using it.
Text(this.data, {Key key,this.style,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,this.textScaleFactor,this.maxLines,this.semanticsLabel,})
The this.data
is where we put the String
, this is easy to understand, we do not talk about this. the style
is most common to use. this.locale
control its language,this time I don't plan to talk about it, I will write another article to explain it. So let's talk about the parameters one by one.
style
Let's look at its definition.
final TextStyle style;
It is a TextStyle
class, look at its definition,so many important parameters are here,such as the fontSize
, color
, height
.
TextStyle({this.inherit = true,this.color,this.fontSize,this.fontWeight,this.fontStyle,this.letterSpacing,this.wordSpacing,this.textBaseline,this.height,this.locale,this.foreground,this.background,this.shadows,this.decoration,this.decorationColor,this.decorationStyle,this.debugLabel,String fontFamily,String package,}
The function of these parameters is a definition with its name. The color
parameter control the color of Text
.The fontSize
controls its font size. We just show an example for simple param.
Text("TextStyle with easy parameters",style: TextStyle(color: Colors.black,fontSize: 22.0,background: Paint()..color = Color(0xffc7e5b4)..style = PaintingStyle.fill,),)
We just change the parameters,they will show as follows.
Text("TextStyle with easy parameters",style: TextStyle(color: Colors.white,fontSize: 14.0,background: Paint()..color = Color(0xffF2A7B3)..style = PaintingStyle.fill,),)
Above code, we can learn how to use color
,fontSize
and background
t,the background is a Paint that controls the color or other things, I don't want to expand this for more detail.
1. foreground
final Paint foreground;
We can see that the foreground
is also as the background
above, so just use the Paint
,the ..
is a special operator in the flutter.
var p= Paint()..color = Color(0xffA8CBFD)..style = PaintingStyle.fill);
Is same as below.
var p= Paint();p.color = Color(0xffA8CBFD);p.style = PaintingStyle.fill);
We just code as follows.
Text("TextStyle with foreground",style: TextStyle(fontSize: 40,foreground: Paint()..color = Color(0xffA8CBFD)..strokeWidth = 1..style = PaintingStyle.stroke),)
The paint draw the Text
with the foreground, be careful that we can't use the color parameter with this, so you can only choose one parameter.
2. fontWeight
final FontWeight fontWeight;
You can see the definition, the class is FontWeight
, you can use its constant with a fore definition. We will use the FontWeight.w700
, it represents bold text. The other constants you can find in the class FontWeight
,remain to you.
Text("TextStyle with fontWeight",style: TextStyle(fontSize: 20,color: RED,fontWeight: FontWeight.w700,),)
3. fontStyle
We know the type is FontStyle
, we use its only two constants.As follows, this example will show an italic text.
Text("TextStyle with fontStyle",style: TextStyle(fontSize: 20,color: BLUE_LIGHT,fontStyle: FontStyle.italic,),)
4. letterSpacing
The parameter will control the distance between the letter inside a word. For example, the word Hello
if set this param, the distance between H,e,l,l,o
will depend on this param.
Text("TextStyle with letterSpacing 4",style: TextStyle(fontSize: 16,color: Colors.black,background: Paint()..color = GREEN,letterSpacing: 4,),),SizedBox(height: 10,),Text("TextStyle with letterSpacing 20",style: TextStyle(fontSize: 16,color: Colors.black,background: Paint()..color = GREEN,letterSpacing: 10,),)
5. wordSpacing
The parameter controls the distance between the two words, I will set two different wordSpacing
to compare.
Text("TextStyle with wordSpacing 1",style: TextStyle(fontSize: 16,color: Colors.black,background: Paint()..color = RED,wordSpacing: 1),),Text("TextStyle with wordSpacing 20",style: TextStyle(fontSize: 16,color: Colors.black,background: Paint()..color = RED,wordSpacing: 20),)
6. shadows
When we see the definition of the shadows
, we can see this.
final List<ui.Shadow> shadows;
The Shadow
constructor is below.
const Shadow({this.color = const Color(_kColorDefault),this.offset = Offset.zero,this.blurRadius = 0.0,}
The offset
is the direction from the origin point of the widget, the blurRadius
is the distance of the blurred space.
So let's see an example.
Text("TextStyle with Shadow",style: TextStyle(fontSize: 30, color: BLUE_DEEP, shadows: [Shadow(color: RED, offset: Offset(1, 2), blurRadius: 2)]),),Text("TextStyle with Shadow",style: TextStyle(fontSize: 30, color: RED, shadows: [Shadow(color: Colors.black, offset: Offset(1, 4), blurRadius: 1),Shadow(color: BLUE_DEEP, offset: Offset(2, 1), blurRadius: 2)]),),
7. decoration
In this part, I will tell three params:decoration, decorationColor, decorationStyle
. They draw the same line show in the Text, the decoration
controls the location, decorationColor
control the color, decorationStyle
control the shape. The definition is below.
final TextDecoration decoration;final Color decorationColor;final TextDecorationStyle decorationStyle;
Let's see an example.
Text("TextStyle with decoration underline",style: TextStyle(fontSize: 20,background: Paint()..color = GREEN,decoration: TextDecoration.underline,decorationColor: Colors.red,decorationStyle: TextDecorationStyle.wavy),),Text("TextStyle with decoration lineThrough",style: TextStyle(fontSize: 20,background: Paint()..color = BLUE_LIGHT,decoration: TextDecoration.lineThrough,decorationColor: Colors.black,decorationStyle: TextDecorationStyle.double),),
8. fontFamily
This parameter changes the typeface for the font. It is a bit difficult, but be patient.
First, we should download a typeface file on the web and in our project, I put into the assets/font
. You should know the folders are created by myself, you can do that too.
Then, config the pubspec.yaml
file in our project,as I note with the red rectangle and paste the config as well.
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: trueassets:- assets/images/- assets/font/fonts:- family: manigufonts:- asset: assets/font/ManigueStaile.ttf
Finally, we can use the font name manigu
as we set above.
Text("Flutter open: TextStyle with fontFamily",style: TextStyle(fontFamily: "manigu", fontSize: 40, color: RED),)
It is easy for use, if you want more detail about the typeface to use, you can click this link. So far, we finish the using of TextStyle
, let's look at the other using.
textAlign
This param controls the Text
location in the parent widget, I will show you it in a Container
. The TextAlign
constants are below, I just use the end
to show.
1 | 2 | 3 |
left | center | right |
start | justify | end |
Container(constraints: BoxConstraints.expand(height: 40),color: BLUE,child: Text("TextAlign end",style: TextStyle(background: Paint()..color = RED),textAlign: TextAlign.end,),)
textDirection
Normally, we draw the Text
from left from right, but we can change it with the textDirection
parameter.
Container(color: YELLOW,constraints: BoxConstraints.expand(height: 40, width: 160),child: Text("textDirection draw from right to left",textDirection: TextDirection.rtl,),)
softWrap
This param will control the whether or not the show all content when there is not enough space for the text to show. If true means that it will show the all content, otherwise not show.
Container(color: RED,constraints: BoxConstraints.expand(height: 40, width: 160),child: Text("softWrap true Text Text Text Text", softWrap: true),),Container(color: BLUE,constraints: BoxConstraints.expand(height: 40, width: 160),child: Text("softWrap false Text Text Text Text", softWrap: false),)
overflow
When there is not enough place to show, how we hand the end part, the overflow is a choice to handle this, above we end just cover the other part, but we can end with three points like follows, you also can use clip
,fade
.
Container(color: YELLOW,constraints: BoxConstraints.expand(height: 40, width: 240),child: Text("overflow TextOverflow.ellipsis: Text Text Text",softWrap: false,overflow: TextOverflow.ellipsis,),),
maxLines
Also, you can use the maxLines
to limit the space, in above part we can see the Text show two lines when there is no space in the horizontal direction.
Container(color: RED_LIGHT,constraints: BoxConstraints.expand(height: 40, width: 230),child: Text("max lines = 1 content content content content content",maxLines: 1,overflow: TextOverflow.ellipsis,),)
textScaleFactor
When we want to make the Text
larger or more little, we can use the fontSize
to change its size. But there is another choice to change its scale, the textScaleFactor
. It depends on the fontSize
, for example, when we set fontSize=10 ,textScaleFactor =2
, the real scale of the Text
will be equal to 20, means that the real-scale= fontSize*textScaleFactor
for the Text
.
Text("textScaleFactor = 1 fontSize = 16 ",style: TextStyle(fontSize: 16, color: BLUE),textScaleFactor: 1,),Text("textScaleFactor = 1.5 fontSize = 20 ",style: TextStyle(fontSize: 16, color: RED),textScaleFactor: 1.2,),
Conclusion
Today we learn how to use the Text, the most common used param is the style, it mainly controls the Text itself, but some other parameters are controlled with its parent widget. But you needn't know all of them, it's just used with your requirement.
Thanks for your reading!
The end.