Text Widget in Flitter

The Text widget in Flitter is used to display a piece of text with a single style. It’s one of the most fundamental widgets for creating user interfaces and is essential for displaying any textual information in your application.

Overview

The Text widget displays a string of text with a single style. The text to display is provided using the widget’s first parameter, and you can customize its appearance using various style properties.

Basic Usage

Here’s a simple example of how to use a Text widget:

import { Text } from "@meursyphus/flitter";

const simpleText = Text("Hello, Flitter!");

This creates a basic text display with the default styling.

Styling Text

To style your text, you can use the style property, which takes a TextStyle object:

import { Text, TextStyle } from "@meursyphus/flitter";

const styledText = Text("Styled Text", {
  style: new TextStyle({
    fontSize: 20,
    fontWeight: "bold",
    color: "blue",
  }),
});

Key TextStyle Properties

  • fontSize: Sets the size of the font.
  • fontWeight: Sets the weight of the font (e.g., ‘normal’, ‘bold’).
  • fontStyle: Sets the style of the font (e.g., ‘normal’, ‘italic’).
  • color: Sets the color of the text.
  • letterSpacing: Sets the spacing between letters.
  • wordSpacing: Sets the spacing between words.
  • textDecoration: Adds decoration to the text (e.g., ‘underline’, ‘overline’, ‘line-through’).
  • fontFamily: Specifies the font family to use.

Advanced Usage

Text Alignment

You can align text within its parent container:

import { Text, TextAlign } from "@meursyphus/flitter";

const alignedText = Text("Centered Text", {
  textAlign: TextAlign.center,
});

Text Overflow

Handle text that might not fit within its bounds:

import { Text, TextOverflow } from "@meursyphus/flitter";

const overflowText = Text("This is a very long text that might overflow...", {
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
});

Text Width Basis

Control how the text width is calculated:

import { Text, TextWidthBasis } from "@meursyphus/flitter";

// Use the width of the longest line
const longLineText = Text("Multi-line text\nwith varying lengths", {
  textWidthBasis: TextWidthBasis.longestLine,
});

// Use parent's width as basis
const parentBasedText = Text("Text that follows parent width", {
  textWidthBasis: TextWidthBasis.parent,
});

Rich Text

For text with multiple styles, you can use the TextSpan widget:

import { Text, TextSpan, TextStyle } from "@meursyphus/flitter";

const richText = Text.rich(
  new TextSpan({
    children: [
      new TextSpan({ text: "Hello ", style: new TextStyle({ color: "blue" }) }),
      new TextSpan({
        text: "Flitter",
        style: new TextStyle({ color: "red", fontWeight: "bold" }),
      }),
      new TextSpan({ text: "!", style: new TextStyle({ fontSize: 24 }) }),
    ],
  }),
);

Best Practices

  1. Use appropriate font sizes: Ensure your text is readable on various device sizes.

  2. Consider accessibility: Use sufficient color contrast and font sizes to make your text accessible to all users.

  3. Be consistent: Maintain consistent text styles throughout your application for a cohesive look.

  4. Use text themes: For larger applications, consider setting up text themes to easily maintain consistent styling across your app.

  5. Test with different lengths: Always test your text widgets with various content lengths to ensure they handle overflow correctly.

Conclusion

The Text widget is a fundamental building block for displaying information in your Flitter applications. By mastering its usage and styling options, you can create visually appealing and readable text displays. Remember to consider factors like readability, accessibility, and consistency when working with text in your UI designs.

Stack Text