Let’s talk about text widget, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into text widget, what they really are, their role, and usage in flutter apps. So the first thing that would come to your mind will be, what is a text widget in the flutter app?
There is a widget called text, and its role is as it is stated, it shows the text, actually it can be anything but the datatype should be string. e.g. if you have a sentence, which let’s say is, ‘I am a text’, this is accepted by text widget, but keep in mind that if you are using it like this then make sure you put it inside a single or double quoted commas. Let’s look at how to define it.
Define Text Widget
This is how you implement the text widget in flutter. But at the moment, it won’t show anything as nothing has been given to its parameters. Let’s now give it some string.
String in Text Widget
Text('I am a text')
Now you know how to give string parameter to a text widget. You can also give it a string variable. Let’s see how to do that.
Variable in Text Widget
String a='I am a text'; Text(a)
Both the above implementations will have the same output. Let’s say you want to print some integer using text widget. Let’s see how to do it.
Int/double in Text Widget
int a=5; Text(a) //error Text(a.toString()) //all good
If you use int directly in text widget, then you will definitely get an error as only a string format is acceptable, so for that we have used the toString method which will in a way make the datatype string and the number 5 will be shown in the screen.
Concatenation in Text Widget
We can also do concatenation, which means merging two or more things together, as in text widget, concatenation takes place by adding two strings or by making the other one string like in the example shown below:
int a=5; Text('I am a string' + a.toString())
Let’s Style our Text
Styling means modifying its properties, like the size of text, its color, its weight(the boldness), shadow of text, underline, font etc. Let’s look each and every one of it.
Text('I am a string' ,style:TextStyle())
As you can see above, the style constructor of text widget is used and its take a text style class, and by using the constructors of the textstyle class, we can style our text. Let’s demonstrate it with giving our text a color. By default, it’s black.
Text('I am a string' ,style:TextStyle(color:Colors.green))
This is how we can customize the color of our text, by using the color constructor and using the colors class properties, which in this example is green. You can also use hex code like Color(0xff746392) or if you want the same color but a little light or dark then use Colors.green.shade300, it will give a green color to the text but will be light.
Now let’s talk about the size of text, how we can increase and decrease it? See the below code:
Text('I am a string' ,style:TextStyle(fontSize:12))
This is how you can give your text you desired size, just use the font size constructor and give it an integer or double value(having decimal format like 2.80 etc.). Use it if you want to make the text bigger or smaller.
Text weight is actually the thickness of it, means how bold the text should look. See the below code:
Text('I am a string' ,style:TextStyle(fontWeight: FontWeight.bold))
Use it to make the text fully bold, if you want the text to be specifically bold to some extent then use the below code:
Text('I am a string' ,style:TextStyle(fontWeight: FontWeight.w600))
We can choose between w100 to w900.
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into the text and other amazing widgets. Thanks.