Text Widget in Flutter

In this tutorial, we will explore the text widget in Flutter. The text widget enables us to create Text elements and display them in our application. The text widget can be customised according to the needs such as animation, colours, size, etc. as we can in HTML and CSS.

Contents

• Create a Text Widget

• Styling the Text Widget

Create a Text Widget

We can easily create a Text widget in Flutter. The first parameter that the widget takes is a string always.

Text('AllAboutFlutter')

Example: We have two Text widgets, one in the AppBar and another in the body of screen.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AllAboutFlutter'),
      ),
      body: const Center(
        child: Text(
          ' This is the Text Widget',
        ),
      ),
    );
  }
}

Output

Styling the Text Widget

The Text widget takes a parameter style where we provide the TextStyle widget.

Text(
  'This is the Text Widget',
  style: TextStyle(),
),

We can provide different styles like colour, fontSize, fontWeight, etc.

Example: We have the Text widget with styles like fontSize, colour and fontWeight.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AllAboutFlutter'),
      ),
      body: const Center(
        child: Text(
          ' This is the Text Widget',
          style: TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.bold,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

Output

Reference: https://api.flutter.dev/flutter/widgets/Text-class.html