Attributes of Style Property

Vinit MepaniVinit Mepani
2 min read

The TextStyle class in Flutter is used to define the style properties for text within the Text widget. Here is a list of some key attributes of the TextStyle class along with a sample example showcasing each attribute:

  1. fontSize (double):

    • Specifies the size of the text.
    Text(
      'Font Size Example',
      style: TextStyle(fontSize: 24.0),
    )
  1. fontWeight (FontWeight):

    • Determines the thickness of the characters. Options include FontWeight.bold, FontWeight.normal, etc.
    Text(
      'Bold Text Example',
      style: TextStyle(fontWeight: FontWeight.bold),
    )
  1. fontStyle (FontStyle):

    • Defines the style of the text, such as normal, italic, etc.
    Text(
      'Italic Text Example',
      style: TextStyle(fontStyle: FontStyle.italic),
    )
  1. color (Color):

    • Sets the color of the text.
    Text(
      'Colored Text Example',
      style: TextStyle(color: Colors.blue),
    )
  1. letterSpacing (double):

    • Specifies the space between characters.
    Text(
      'Letter Spacing Example',
      style: TextStyle(letterSpacing: 2.0),
    )
  1. wordSpacing (double):

    • Determines the space between words.
    Text(
      'Word Spacing Example',
      style: TextStyle(wordSpacing: 4.0),
    )
  1. decoration (TextDecoration):

    • Adds decorations to the text, such as underline or line-through.
    Text(
      'Underlined Text Example',
      style: TextStyle(decoration: TextDecoration.underline),
    )
  1. decorationColor (Color):

    • Sets the color of the text decoration.
    Text(
      'Underlined Text with Color Example',
      style: TextStyle(
        decoration: TextDecoration.underline,
        decorationColor: Colors.red,
      ),
    )
  1. decorationStyle (TextDecorationStyle):

    • Defines the style of the text decoration line.
    Text(
      'Dashed Underline Example',
      style: TextStyle(
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dashed,
      ),
    )
  1. background (Paint):

    • Sets the background color of the text.
    Text(
      'Text with Background Color',
      style: TextStyle(
        background: Paint()..color = Colors.yellow,
      ),
    )

These examples demonstrate various style attributes that can be applied to text in Flutter using the TextStyle class. You can mix and match these attributes to achieve the desired visual appearance for your text.

Here's a comprehensive example that combines various attributes of the TextStyle class in Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextStyle Attributes Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '1. Font Size and Color Example',
                style: TextStyle(fontSize: 24.0, color: Colors.blue),
              ),
              Text(
                '2. Bold and Italic Text Example',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                ),
              ),
              Text(
                '3. Letter and Word Spacing Example',
                style: TextStyle(letterSpacing: 2.0, wordSpacing: 4.0),
              ),
              Text(
                '4. Underlined Text Example',
                style: TextStyle(decoration: TextDecoration.underline),
              ),
              Text(
                '5. Underlined Text with Color and Style Example',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                  decorationColor: Colors.red,
                  decorationStyle: TextDecorationStyle.dashed,
                ),
              ),
              Text(
                '6. Text with Background Color Example',
                style: TextStyle(
                  background: Paint()..color = Colors.yellow,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
0
Subscribe to my newsletter

Read articles from Vinit Mepani directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Vinit Mepani
Vinit Mepani

"Hello World, I'm Vinit Mepani, a coding virtuoso driven by passion, fueled by curiosity, and always poised to conquer challenges. Picture me as a digital explorer, navigating through the vast realms of code, forever in pursuit of innovation. In the enchanting kingdom of algorithms and syntax, I wield my keyboard as a magical wand, casting spells of logic and crafting solutions to digital enigmas. With each line of code, I embark on an odyssey of learning, embracing the ever-evolving landscape of technology. Eager to decode the secrets of the programming universe, I see challenges not as obstacles but as thrilling quests, opportunities to push boundaries and uncover new dimensions in the realm of possibilities. In this symphony of zeros and ones, I am Vinit Mepani, a coder by passion, an adventurer in the digital wilderness, and a seeker of knowledge in the enchanting world of code. Join me on this quest, and let's create digital wonders together!"