Text Widget Styling

Introduction of Text Widget Styling

In Flutter, text widget is typically achieved using the TextStyle class, which is applied to the Text widget to control various aspects of the text’s appearance. The TextStyle class in Flutter is used to define the visual style of a text. It provides properties that control the font, color, decoration, and spacing of the text.

Here’s a breakdown of the key properties of TextStyle and how they can be used to style text:

color Property: Defines the color of the text.

Text(
  'Hello',
  style: TextStyle(color: Colors.blue),
),

fontSize Property: Sets the size of the text.

Text(
  'Hello',
  style: TextStyle(fontSize: 16.0),
),

fontWeight Property: Specifies the thickness of the characters in the text.

Text(
  'Hello',
  style: TextStyle(fontWeight: FontWeight.bold),
),

fontStyle Property: Determines whether the text is italic or not.

Text(
  'Hello',
  style: TextStyle(fontStyle: FontStyle.italic),
),

letterSpacing Property: Controls the space between each character in the text.

Text(
  'Hello',
  style: TextStyle(letterSpacing: 2.0),
),

wordSpacing Property: Sets the additional space between words.

Text(
  'Hello World',
  style: TextStyle(wordSpacing: 4.0),
),

decoration Property: Specifies decorations to be applied to the text.

Text(
  'Hello',
  style: TextStyle(decoration: TextDecoration.underline),
),

decorationColor Property: Specifies the color of the text decoration.

Text(
  'Hello',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
  ),
),

decorationStyle Property: Sets the style of the text decoration.

Text(
  'Hello',
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
    decorationStyle: TextDecorationStyle.double,
  ),
),

fontFamily Property: Specifies the font family for the text.

Text(
  'Hello',
  style: TextStyle(fontFamily: 'Roboto'),
),

height Property: Controls the height of the text.

Text(
  'Hello',
  style: TextStyle(height: 1.5),
),

background Property: Sets the background color of the text.

Text(
  'Hello',
  style: TextStyle(background: new Paint().color = Colors.yellow),
),

Usage: The TextStyle class is often applied to the style property of the Text widget to customize the appearance of the text.

Text(
  'Hello Flutter',
  style: TextStyle(
    color: Colors.blue,
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
  ),
),

Final Code: This is the final code with some of the above properties.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(
              'Text Widget Tutorial',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            Text(
              'How to customise and style texts with flutter :D',
              style: TextStyle(
                fontSize: 20,
                decoration: TextDecoration.lineThrough,
                fontFamily: 'Poppins',
                decorationStyle: TextDecorationStyle.double,
                decorationColor: Colors.white,
                color: Colors.tealAccent.shade700,
                fontStyle: FontStyle.italic,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This Text widget displays the text “Hello Flutter” with a blue color, a font size of 20.0, and bold weight. Developers can customize the TextStyle properties to achieve the desired visual effects for their text elements in Flutter applications.

Thank for visiting Hybrid App Development
Posted by Hussam HM