In this tutorial, we’ll talk about the Flutter text widget, what it really is, its role, and its 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? Let’s understand it using practical Flutter code examples.
Introduction: Flutter Text Widget
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 a string.
Example
If you have a sentence, which let’s say is, ‘I am a text’. It is accepted by the 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
Text()
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 parameters 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 an integer directly in a 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 on 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), the shadow of text, underlining, font, etc. Let’s look at each and every one of them.
Implementation
Text('I am a string' ,style:TextStyle())As you can see above, the style constructor of the text widget is used and it takes a text style class, and by using the constructors of the text style class, we can style our text. Let’s demonstrate it by giving our text a color. By default, it’s black.
Text Color
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.
Text Size
Now let’s talk about the size of text, and 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 your 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
Text weight is actually its thickness of it, which 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.
Conclusion
In conclusion, hope you now have an in-depth practical understanding of how to properly customize the Flutter text widget. We’ll be looking forward to receiving your feedback.
We’d be super delighted to see you visit our other articles on Flutter app development and Python programming. Thank you for reading this one.