Text Widget

The Text widget displays a string of text with various styles and properties. It supports rich text formatting, alignment, overflow handling, and more.

Properties

• text: string - The text to display
• style: TextStyle - Text styling properties

  new TextStyle({
    color?: string,              // Text color
    fontSize?: number,           // Font size in pixels
    fontWeight?: string,         // Font weight (e.g., "normal", "bold")
    fontFamily?: string,         // Font family name
    fontStyle?: FontStyle,       // FontStyle.normal or FontStyle.italic
    height?: number,             // Line height as multiple of font size
    inherit?: boolean           // Whether to inherit parent style
  })
  

• textAlign: TextAlign - Text alignment

  TextAlign.left;
  TextAlign.right;
  TextAlign.center;
  TextAlign.start; // Leading edge (left in LTR, right in RTL)
  TextAlign.end; // Trailing edge (right in LTR, left in RTL)
  

• overflow: TextOverflow - How to handle text overflow

  TextOverflow.clip; // Clip overflowing text
  TextOverflow.visible; // Show overflowing text
  TextOverflow.ellipsis; // Show ellipsis (...) for overflow
  

• softWrap: boolean - Whether text should break at soft line breaks
• textDirection: TextDirection - The directionality of the text
• textWidthBasis: TextWidthBasis - How to measure the width of the rendered text

  TextWidthBasis.parent;      // Use parent width as basis
  TextWidthBasis.longestLine; // Use width of longest line
  

Common Use Cases

1. Basic Text:

   Text("Hello Flitter");
   

2. Styled Text:

   Text("Styled Text", {
     style: new TextStyle({
       fontSize: 24,
       color: "blue",
       fontWeight: "bold",
     }),
   });
   

3. Centered Text:

   Text("Centered Text", {
     textAlign: TextAlign.center,
     style: new TextStyle({
       fontSize: 18,
     }),
   });
   

4. Text with Overflow:

   Text("This is a very long text...", {
     overflow: TextOverflow.ellipsis,
     style: new TextStyle({
       fontSize: 16,
     }),
   });
   

5. Text with Line Wrapping:

   Text("This is a long text that will wrap to the next line when it reaches the container's width", {
     softWrap: true,
     style: new TextStyle({
       fontSize: 16,
     }),
   });
   

6. Text with Width Basis:

   Text("Multi-line text\nwith varying line lengths", {
     textWidthBasis: TextWidthBasis.longestLine,
     style: new TextStyle({
       fontSize: 16,
     }),
   });
   

Best Practices

1. Styling Guidelines:

   • Use TextStyle for consistent text styling
   • Consider font scaling for accessibility
   • Use appropriate font sizes for readability
   • Keep color contrast in mind

2. Layout Tips:

   • Use textAlign for proper alignment
   • Consider overflow handling
   • Use appropriate line height for readability
   • Handle text direction when needed
   • Use softWrap for automatic line breaking
   • Choose appropriate textWidthBasis for layout calculations

3. Performance Tips:

   • Cache TextStyle objects when possible
   • Use const constructors
   • Consider text measurement impact
   • Avoid unnecessary style changes

Common Patterns

1. Title Text:

   Text("Title", {
     style: new TextStyle({
       fontSize: 24,
       fontWeight: "bold",
       color: "black",
     }),
   });
   

2. Caption Text:

   Text("Caption", {
     style: new TextStyle({
       fontSize: 12,
       color: "gray",
       height: 1.2,
     }),
   });
   

3. Error Message:

   Text("Error: Something went wrong", {
     style: new TextStyle({
       fontSize: 14,
       color: "red",
       fontWeight: "bold",
     }),
   });
   

Tips and Tricks

1. Style Tips:

   • Use font weight for emphasis
   • Consider line height for readability
   • Use appropriate font families
   • Keep text styles consistent

2. Layout Tips:

   • Use Container for text width constraints
   • Consider text alignment with parent
   • Handle overflow appropriately
   • Use padding for text spacing

3. Accessibility Tips:

   • Use semantic font sizes
   • Maintain good color contrast
   • Consider text scaling
   • Use appropriate line height