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 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

🌀 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 AppBar with an Easy Example

  In Flutter, the AppBar is a simple yet powerful widget that provides the top app bar typically found in mobile applications. It is a critical part of your app's layout and design, giving users easy access to navigation, search, actions, and other features in your app. In this blog post, we will explore the AppBar widget in Flutter, how to customize it, and provide a simple example to help you get started. ------------------------------------------------------------------------ What is an AppBar in Flutter? The AppBar widget in Flutter is a material design app bar that can be used to display titles, icons, action buttons, and other important elements at the top of your app screen. The AppBar is usually placed inside a Scaffold widget, which provides a basic layout structure for the app.  Key Features of AppBar : Title : Displays the main title of the screen. Actions : Typically used to place action icons like search or menu buttons. Lead...
Post a Comment
Read more