Text Widget In Flutter

Parveen Baghel

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.

Make a basic Text Widget In Flutter.

Let’s make a flutter application and add a scaffold as the home screen as follows.

import 'package:flutter/material.dart';

void main() =&gt; 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")
    );
  }
}

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")

);

}

Let’s add some basic styling.

Align the text

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.

textAlign: TextAlign.center,

1	textAlign: TextAlign.center,

Font size using textScaleFactor

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.

Text(
  "Hi",
  textAlign: TextAlign.center,
  textScaleFactor: 4.0,
),

Text(

"Hi",

textAlign: TextAlign.center,

textScaleFactor: 4.0,

Style using TextStyle class

We can use Textstyle widget to style our text.

style: TextStyle()

1	style: TextStyle()

Adding text colours

Basic coloring can be done using style attributes. The Colors class can be used for add colors and there are some more methods.

style: TextStyle(
    color: Colors.blue
  ),

style: TextStyle(

color: Colors.blue

Adding font weights

Font weights can also be added using the Textstyle class as follows.

fontWeight: FontWeight.w300,

1	fontWeight: FontWeight.w300,

Adding space between letters and words

TextStyle class facilitate both letter spacing and word spacing using two attributes namely letterSpacing and wordSpacing. Both attributes take double value as the input.

letterSpacing: 2.0,
wordSpacing: 100.0,

1 2	letterSpacing: 2.0, wordSpacing: 100.0,

Let’s do some alignment

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.

Horizontally add Text widgets

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.

Text(
      "Hello world!!",
      textAlign: TextAlign.center,
      style: TextStyle(
          fontSize: 40.0,
          color: Colors.blue,
          fontFamily: "Caveat",
          fontWeight: FontWeight.w700),
    ),

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 🎊 .

Conclusion

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.