top of page

Text Widget in Flutter

Updated: Nov 27, 2022

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

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



Related Posts

See All

The image sharing apps, shopping apps, etc. have image zoom functionality required to see the image in detail. Today, we will learn to implement the same with the help of a widget, InteractiveViewer.

bottom of page