Skip to main content

Text Widget In Flutter

 


The Text widget in Flutter is used to display text on the screen. It's one of the most fundamental widgets and supports a wide range of customizations to style, align, and manage text. Here’s a detailed overview:

Basic Syntax

dart
Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.blue),
  textAlign: TextAlign.center,
)

Key Properties

  1. data:

    • The text string to display.
    • Example: 'Hello, World!'.

  2. style:

    • Defines the appearance of the text.
    • Uses the TextStyle class for customization.

    Example:

    dart
    Text(
  'Styled Text',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.red,
    fontStyle: FontStyle.italic,
    letterSpacing: 2.0,
    wordSpacing: 5.0,
    decoration: TextDecoration.underline,
  ),
)

  3. textAlign:

    • Aligns the text horizontally.
    • Values: TextAlign.left, TextAlign.right, TextAlign.center, TextAlign.justify, etc.
    • Example:
      dart
      textAlign: TextAlign.center,

  4. maxLines:

    • Limits the number of lines to display.
    • Example:
      dart
      maxLines: 2,

  5. overflow:

    • Controls how the text behaves when it overflows the available space.
    • Options:
      • TextOverflow.clip (trims text at the boundary)
      • TextOverflow.ellipsis (adds "...")
      • TextOverflow.fade (fades out the text)
    • Example:
      dart
      overflow: TextOverflow.ellipsis,

  6. softWrap:

    • Determines whether text should wrap when it exceeds its width.
    • Example:
      dart
      softWrap: true,

  7. textScaleFactor:

    • Scales the text size.
    • Default is 1.0.
    • Example:
      dart
      textScaleFactor: 1.5,

  8. strutStyle:

    • Defines vertical layout constraints like height and baseline alignment.
    • Used for fine-grained control over text spacing.

TextStyle Class

The TextStyle object is used to style the text. Common properties include:

  • fontSize: Sets the font size.
  • color: Sets the text color.
  • fontWeight: Controls the thickness (e.g., FontWeight.bold).
  • fontStyle: Makes the text italic (FontStyle.italic).
  • letterSpacing: Adjusts spacing between letters.
  • wordSpacing: Adjusts spacing between words.
  • decoration: Adds decoration (e.g., underline, strike-through).

Advanced Features

  1. Rich Text: If you need different styles in the same text block, use the RichText widget with TextSpan.

    Example:

    dart
    RichText(
  text: TextSpan(
    text: 'Hello, ',
    style: TextStyle(fontSize: 20, color: Colors.black),
    children: [
      TextSpan(
        text: 'Flutter!',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
      ),
    ],
  ),
)

  2. Localization: Use the Text widget with internationalization (i18n) support for multi-language apps using Flutter's intl package.

Examples

Centered Text:

dart
Center(
  child: Text(
    'Welcome!',
    textAlign: TextAlign.center,
    style: TextStyle(fontSize: 30, color: Colors.green),
  ),
)

Limited Lines with Ellipsis:

dart
Text(
  'This is a very long text that might overflow.',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

Multi-line Text:

dart
Text(
  'This is the first line.\nThis is the second line.',
  style: TextStyle(fontSize: 18),
  textAlign: TextAlign.start,
)

Best Practices

  • Use Text for simple, single-style text content.
  • Use RichText or TextSpan for multi-style or dynamic text.
  • Leverage maxLines and overflow to handle large content gracefully.

Comments

Post a Comment

Your Complete Flutter Roadmap: From Beginner to Pro

🌀 Flutter App Lifecycle – Easy Way to Understand

  When you build an app in Flutter , it goes through different states depending on how the user interacts with it (open, minimize, back button, etc). Think of it like a human day cycle – Wake up → Active → Sleep → Wake again . 🌱 1. main() – Birth of the App Every Flutter app starts from the main() function. void main() { runApp(MyApp()); } 👉 This is like turning ON the lights – your app is born. 🏗 2. Widgets Lifecycle In Flutter, everything is a Widget . There are two main types: StatelessWidget → UI that doesn’t change. StatefulWidget → UI that changes with user interaction. For StatefulWidget , the lifecycle looks like this: 🔹 When Widget is created createState() → Creates a State object (like preparing memory). initState() → First time setup (like waking up, stretching, preparing breakfast). Best place for API calls , animation controllers , initial values . 🔹 When Widget builds build() → Renders UI (like dressin...
Post a Comment
Read more

📱 Flutter ListTile and ListView: Explained with Easy Examples

Flutter ListTile and ListView: When you start learning Flutter, two widgets often confuse beginners: ListTile  &  ListView . Both are used to display items in a list, but their purpose is different. Let’s break them down in a simple way. 🔹 What is ListTile in Flutter? ListTile is a ready-made widget used to show a single row (one item). It usually contains: title (main text) subtitle (small text under the title) leading (icon/image on the left) trailing (icon/text on the right) 👉 Think of ListTile as a single row card inside a list. ✅ Example of ListTile: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("Flutter ListTile Example")), body: const ListTile( leading:...
Post a Comment
Read more