Text Widget In Depth - Flutter

What's the most used widget in flutter?

Text Widget.

We use Text Widget in flutter to render text to our application. Text widget is very commonly used as an independent widget or as a sub widget in some other widget. E.g. as a child to a RaisedButton.

Here is a small code which uses almost all the properties you might use when developing flutter application for Text Widget and also shows how you can use Text.rich() for multiple formatting of the text.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          // Alignment in vertical direction for columns (in horizontal direction for Rows).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10),
              width: MediaQuery.of(context).size.width,
              child: Text(
                'Hello World',
                // Center Aligned with respect to parent.
                textAlign: TextAlign.center,
                //Font size 50% larger than specified font size
                textScaleFactor: 1.5,
                // Used for Font Styling
                style: TextStyle(
                  // Specify Font Size
                  fontSize: 20,
                  // Specify Font Color
                  color: Colors.blue,
                  // Specify thickness of font
                  fontWeight: FontWeight.w800,
                  // Specify space between each letter
                  letterSpacing: 10,
                  // Specify space between every word
                  wordSpacing: 10,
                  // Specify background color of text
                  backgroundColor: Colors.black,
                  // Specify various decorations such as lineThrough, overline, underline or Combined.
                  decoration: TextDecoration.combine([
                    // Line through the text.
                    TextDecoration.lineThrough,
                    // Line Under the text.
                    TextDecoration.underline,
                    // Line at the top of the text.
                    TextDecoration.overline
                  ]),
                ),
              ),
            ),
            // Takes in TextSpan, and children of TextSpan. Other
            // Properties similar to Text Widget.
            Text.rich(
              TextSpan(
                text: 'Hello ',
                style: TextStyle(
                  fontSize: 30,
                ),
                children: [
                  TextSpan(
                    text: 'stacklearn.org',
                    style: TextStyle(
                      fontSize: 30,
                      fontStyle: FontStyle.italic,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

We use Text Widget to render text in flutter with all the text styled in a single style. If you want multiple styling then for that we use Text.rich() which contains a TextSpan widget and a children property where we can add more TextSpan widgets.

Some Common Property when we use Text Widget are:

• style : takes in a TextStyle widget (see also google_fonts)
• fontSize : used to size our text.
• fontWeight : gives thickness to our text
• color : used to specify color of the text
• textAlign : used to align our text with respect to its parent.

If you enjoyed this blog, subscribe to it for more updates!