Updated 26 April 2023
Row widget, Column widget, Extended widget, Padding Widget, and Container widget are used apart from the Text widget In flutter to give a better understanding of alignment.
You may also check out our Flutter app development company for app development.
Let’s make a flutter application and add a scaffold as the home screen as follows.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( title: "Demo", home: Home(), )); class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Text Widget In Flutter"), ), body:Text("Hi") ); } } |
Before align the text you have to make some space because if you align the text and there are no space nothing will happen and to align the text you have to use textAlign attribute in Text widget as follows.
1 |
textAlign: TextAlign.center, |
There are two way of adjust the font size one is using the textScaleFactor in Text widget or using TextStyle class which will be discussed in latter part. textScaleFactor attribute takes a double value which is consider as a scaling factor and scale the text as follows.
1 2 3 4 5 |
Text( "Hi", textAlign: TextAlign.center, textScaleFactor: 4.0, ), |
We can use Textstyle widget to style our text.
1 |
style: TextStyle() |
Basic coloring can be done using style attributes. The Colors class can be used for add colors and there are some more methods.
1 2 3 |
style: TextStyle( color: Colors.blue ), |
Font weights can also be added using the Textstyle class as follows.
1 |
fontWeight: FontWeight.w300, |
TextStyle class facilitate both letter spacing and word spacing using two attributes namely letterSpacing and wordSpacing. Both attributes take double value as the input.
1 2 |
letterSpacing: 2.0, wordSpacing: 100.0, |
Then the problem arise when you need to add more Text widgets on the screen and for that you have to use Row widget and Column widget and there are many more.
When it comes to add horizontally add more text widget you have to add your Text widgets in an array and wrap them inside a Row widget as follows.
1 2 3 4 5 6 7 8 9 |
Text( "Hello world!!", textAlign: TextAlign.center, style: TextStyle( fontSize: 40.0, color: Colors.blue, fontFamily: "Caveat", fontWeight: FontWeight.w700), ), |
That’s all for this Article 🎊 .
We learned about Text Widget in Flutter in this blog.
Visit the link for additional information on the Text Widget in Flutter.
Thanks for reading this blog. You can also check other blogs from here for more knowledge.
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.