Mastering Flutter Text Widget: Basic to Advanced Techniques

This article provides a comprehensive guide to mastering the Flutter text widget, covering everything from basic usage to advanced techniques like responsive text and custom typography. 

Learn how to create beautiful and responsive text layouts in your Flutter applications using the powerful text widget.

Text center aligned

Creates a Text widget with the text "This text is center aligned" and aligns it to the center using the  textAlign property.


                    const Text(
                      'This text is center aligned.',
                      textAlign: TextAlign.center,
                    ),

...

Text soft Wrap

This is a Text widget that displays a long string of text that will wrap around the edges of the container the softWrap property is set to true, meaning that the text will be wrapped to the next line instead of overflowing.



                    const Text(
                      'This is a very long text that will wrap around the edges of the container if the softWrap property is set to true.',
                      softWrap: true,
                    ),

..

Text ellipsis:

This creates a Text widget that will truncate the text with an ellipsis at the end if it overflows the container.

The text content is defined in a string and the TextOverflow.ellipsis property is used to enable truncation



                    const Text(
                      'This text will be truncated with an ellipsis at the end if it overflows the container.',
                      overflow: TextOverflow.ellipsis,
                    ),

..

Text letter spacing

It applies a TextStyle to the text, which sets the letterSpacing property to 2.0.The letterSpacing property adjusts the space between each letter in the text.



                    const Text(
                      ' The spacing between letters in the text',
                      style: TextStyle(letterSpacing: 2.0),
                    ),

..

Text spacing between lines

This creates a Text widget that displays the given string with a height of 5.0 between each line of text.



                    const Text(
                      ' The spacing between lines in the text',
                      style: TextStyle(height: 5.0),
                    ),

..

Text Specific style

Create a Text widget with a specific style from the current theme.



                    Text(
                      'This text will use the headline6 text theme.',
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),

..

Text Accessibility

This code creates a button with accessibility features. The Semantics widget is used to add a label for the button that describes its purpose to assistive technologies.

The label property is set to 'This is a button'. The TextButton widget is used to create the button, with the text 'Accessibility Button' as its child and an empty onPressed function.



                    Semantics(
                      label: 'This is a button',
                      child: TextButton(
                        onPressed: () {},
                        child: const Text('Accessibility Text Button : Semantics'),
                      ),
                    ),

..

Text Selectable

This code creates a SelectableText widget that displays the text "This text can be selected". The widget allows the user to select and copy the text.



                    const SelectableText(
                      'This text can be selected',
                    ),

..

Text Wrap

This code displays a Row widget with two children: a Flexible widget containing a Text widget, and an Icon widget.

The Text widget has a fixed font size of 18 and is wrapped inside a Flexible widget to allow the text to wrap to the next line if it is too long to fit on one line. The Icon widget displays the "star" icon.



                    Row(
                      children: const [
                        Flexible(
                          child: Text(
                            'This text will wrap if it is too long to fit on one line',
                            style: TextStyle(
                              fontSize: 18,
                            ),
                          ),
                        ),
                        Icon(Icons.star),
                      ],
                    ),

..

Text Rich

If you need to display a simple rich text with multiple styles, Text.rich might be easier and more concise to use.

This code displays a Text widget using the Text.rich constructor, which allows for the creation of a rich text with multiple styles within a single Text widget.



                    const Text.rich(
                      TextSpan(
                        text: 'Text.rich : This text is ',
                        style: TextStyle(fontSize: 18),
                        children: [
                          TextSpan(
                            text: 'bold',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          TextSpan(text: ' and '),
                          TextSpan(
                            text: 'underlined',
                            style:
                                TextStyle(decoration: TextDecoration.underline),
                          ),
                        ],
                      ),
                    ),

..

Rich Text

If you need to create a more complex rich text layout with multiple child TextSpan widgets,  RichText would be the better choice.



                    RichText(
                        text: TextSpan(
                            text: 'RichText : I am agree to the ',
                            style: Theme.of(context).textTheme.labelSmall,
                            children: [
                              TextSpan(
                                text: 'Term',
                                style: const TextStyle(
                                    fontWeight: FontWeight.bold,
                                    color: Colors.blue,
                                    decoration: TextDecoration.underline),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    // do something
                                  },
                              ),
                              const TextSpan(text: ' and '),
                              TextSpan(
                                  text: 'Privacy',
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.blue,
                                      decoration: TextDecoration.underline),
                                  recognizer: TapGestureRecognizer()..onTap = () {})
                            ])),

..

Text font family

This code displays a Text widget that uses a custom font named 'Jost'.The font family is specified in the TextStyle widget using the 'fontFamily' property, while the font size is set to 18.



                    const Text(
                      'This text uses a custom font',
                      style: TextStyle(
                        fontFamily: 'Jost',
                        fontSize: 18,
                      ),
                    ),

..

Text Gradient : Custom widget

This code displays a GradientText widget that renders text with a gradient effect.



                    const GradientText(
                      text: "Hello World!",
                      gradient: LinearGradient(
                        colors: [Colors.blue, Colors.green],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                    ),

..

Here is the full code:



import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class BasicWidgetText extends StatelessWidget {
  const BasicWidgetText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(16),
              width: 400,
              color: Colors.grey.shade100,
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max, // set ma
                  children: [
                    /* Creates a Text widget with the text "This text is center aligned
                and aligns it to the center using the textAlign property.
                 */
                    const Text(
                      'This text is center aligned.',
                      textAlign: TextAlign.center,
                    ),
                    const Divider(),

                    /*
                 This is a Text widget that displays a long string of text that will
                 wrap around the edges of the container the softWrap property is
                 set to true, meaning that the text will be wrapped to the
                 next line instead of overflowing.
                 */
                    const Text(
                      'This is a very long text that will wrap around the edges of the container if the softWrap property is set to true.',
                      softWrap: true,
                    ),
                    const Divider(),

                    /*
                This creates a Text widget that will truncate the text with an
                ellipsis at the end if it overflows the container.
                The text content is defined in a string and the
                TextOverflow.ellipsis property is used to enable truncation
                 */
                    const Text(
                      'This text will be truncated with an ellipsis at the end if it overflows the container.',
                      overflow: TextOverflow.ellipsis,
                    ),
                    const Divider(),

                    /* It applies a TextStyle to the text, which sets the letterSpacing
                property to 2.0.The letterSpacing property adjusts the
                space between each letter in the text.*/
                    const Text(
                      ' The spacing between letters in the text',
                      style: TextStyle(letterSpacing: 2.0),
                    ),
                    const Divider(),

                    /*This creates a Text widget that displays the given string with a
                 height of 5.0 between each line of text.*/
                    const Text(
                      ' The spacing between lines in the text',
                      style: TextStyle(height: 5.0),
                    ),
                    const Divider(),

                    /*Create a Text widget with a specific style from the current theme*/
                    Text(
                      'This text will use the headline6 text theme.',
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
                    const Divider(),

                    /*This code creates a button with accessibility features.
                The Semantics widget is used to add a label for the button
                that describes its purpose to assistive technologies.

                The label property is set to 'This is a button'.
                The TextButton widget is used to create the button,
                with the text 'Accessibility Button' as its child and an empty onPressed function.*/
                    Semantics(
                      label: 'This is a button',
                      child: TextButton(
                        onPressed: () {},
                        child: const Text('Accessibility Text Button : Semantics'),
                      ),
                    ),
                    const Divider(),

                    /*This code creates a SelectableText widget that displays the text "This text can be selected".
                The widget allows the user to select and copy the text.*/
                    const SelectableText(
                      'This text can be selected',
                    ),
                    const Divider(),

                    /*This code displays a Row widget with two children: a Flexible widget containing a Text widget,
                and an Icon widget.
                The Text widget has a fixed font size of 18 and is wrapped inside a
                Flexible widget to allow the text to wrap to the next line if it is too long to fit on one line.
                The Icon widget displays the "star" icon.*/
                    Row(
                      children: const [
                        Flexible(
                          child: Text(
                            'This text will wrap if it is too long to fit on one line',
                            style: TextStyle(
                              fontSize: 18,
                            ),
                          ),
                        ),
                        Icon(Icons.star),
                      ],
                    ),
                    const Divider(),

                    /*
                This code displays a Text widget using the Text.rich constructor,
                which allows for the creation of a rich text with multiple styles within a single Text widget.
                 */
                    const Text.rich(
                      TextSpan(
                        text: 'Text.rich : This text is ',
                        style: TextStyle(fontSize: 18),
                        children: [
                          TextSpan(
                            text: 'bold',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          TextSpan(text: ' and '),
                          TextSpan(
                            text: 'underlined',
                            style:
                                TextStyle(decoration: TextDecoration.underline),
                          ),
                        ],
                      ),
                    ),
                    /*If you need to display a simple rich text with multiple styles,
                Text.rich might be easier and more concise to use. On the other hand,
                if you need to create a more complex rich text layout with multiple child
                TextSpan widgets, RichText would be the better choice.*/
                    const Divider(),
                    const Text.rich(
                      TextSpan(
                        text: 'Text.rich : This is ',
                        style: TextStyle(fontSize: 18),
                        children: [
                          TextSpan(
                            text: 'bold',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          TextSpan(text: ' and '),
                          TextSpan(
                            text: 'red',
                            style: TextStyle(color: Colors.red),
                          ),
                        ],
                      ),
                    ),
                    const Divider(),



                    /*This code creates a RichText widget that displays styled text.
                 The text consists of three parts: "Hello", "world", and "!".*/
                    RichText(
                      text: const TextSpan(
                        text: 'RichText : Hello ',
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 24,
                        ),
                        children: [
                          TextSpan(
                            text: 'world',
                            style: TextStyle(
                              color: Colors.blue,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          TextSpan(
                            text: '!',
                            style: TextStyle(
                              color: Colors.black,
                              fontSize: 24,
                            ),
                          ),
                        ],
                      ),
                    ),
                    const Divider(),
                    RichText(
                        text: TextSpan(
                            text: 'RichText : I am agree to the ',
                            style: Theme.of(context).textTheme.labelSmall,
                            children: [
                              TextSpan(
                                text: 'Term',
                                style: const TextStyle(
                                    fontWeight: FontWeight.bold,
                                    color: Colors.blue,
                                    decoration: TextDecoration.underline),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    // do something
                                  },
                              ),
                              const TextSpan(text: ' and '),
                              TextSpan(
                                  text: 'Privacy',
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.blue,
                                      decoration: TextDecoration.underline),
                                  recognizer: TapGestureRecognizer()..onTap = () {})
                            ])),
                    const Divider(),

                    /*This code displays a Text widget that uses a custom font named 'Jost'.
                The font family is specified in the TextStyle widget using the 'fontFamily' property,
                while the font size is set to 18.*/
                    const Text(
                      'This text uses a custom font',
                      style: TextStyle(
                        fontFamily: 'Jost',
                        fontSize: 18,
                      ),
                    ),
                    const Divider(),

                    /* This code displays a GradientText widget that renders text with
                a gradient effect.*/
                    const GradientText(
                      text: "Hello World!",
                      gradient: LinearGradient(
                        colors: [Colors.blue, Colors.green],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                    ),
                    const Divider(),
                  ]),
            ),
          ),
        ));
  }
}

/// A widget that displays text with a gradient color effect.
class GradientText extends StatelessWidget {
  final String text;
  final Gradient gradient;

  const GradientText({super.key, required this.text, required this.gradient});

  @override
  Widget build(BuildContext context) {
    // Create a ShaderMask widget with a gradient shader that will be applied to the text.
    return ShaderMask(
      shaderCallback: (bounds) => gradient.createShader(
        Rect.fromLTWH(0, 0, bounds.width, bounds.height),
      ),
      // Display the text with a bold white font color.
      child: Text(
        text,
        style: const TextStyle(
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    );
  }
}


..

..

Comments