TextAppi

An enhanced text widget with advanced styling capabilities and built-in accessibility features.

Overview

TextAppi extends Flutter's standard Text widget with additional customization options, better performance, and enhanced accessibility support. It's designed to be the go-to text component for all your text display needs.

Features

🎨 Advanced Styling - Rich text styling options
♿ Accessibility - Built-in screen reader support
📱 Responsive - Automatic text scaling
🌙 Theme Support - Seamless light/dark mode
⚡ Performance - Optimized rendering

Basic Usage

TextAppi(
  text: 'Hello, World!',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
)

Properties

Property	Type	Default	Description
`text`	`String`	required	The text to display
`style`	`TextStyle?`	`null`	Text styling options
`textAlign`	`TextAlign?`	`null`	Text alignment
`maxLines`	`int?`	`null`	Maximum number of lines
`overflow`	`TextOverflow?`	`null`	How to handle text overflow
`softWrap`	`bool?`	`null`	Whether text should break at soft line breaks
`textScaleFactor`	`double?`	`null`	Text scale factor for accessibility
`semanticsLabel`	`String?`	`null`	Semantic label for screen readers

Examples

Basic Text

TextAppi(
  text: 'Simple text example',
)

Styled Text

TextAppi(
  text: 'Styled Text',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.2,
  ),
  textAlign: TextAlign.center,
)

Responsive Text

TextAppi(
  text: 'Responsive text that adapts to screen size',
  style: TextStyle(
    fontSize: MediaQuery.of(context).size.width > 600 ? 24 : 18,
    fontWeight: FontWeight.w600,
  ),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Themed Text

TextAppi(
  text: 'Themed text using app colors',
  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
    color: Theme.of(context).primaryColor,
  ),
)

Accessible Text

TextAppi(
  text: 'Accessible text with semantic label',
  semanticsLabel: 'This is an important announcement',
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w500,
  ),
)

Typography Variants

Headings

// Large Heading
TextAppi(
  text: 'Large Heading',
  style: TextStyle(
    fontSize: 32,
    fontWeight: FontWeight.bold,
    height: 1.2,
  ),
)

// Medium Heading
TextAppi(
  text: 'Medium Heading',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.w600,
    height: 1.3,
  ),
)

// Small Heading
TextAppi(
  text: 'Small Heading',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w500,
    height: 1.4,
  ),
)

Body Text

// Large Body
TextAppi(
  text: 'Large body text for important content',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.normal,
    height: 1.5,
  ),
)

// Regular Body
TextAppi(
  text: 'Regular body text for general content',
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.normal,
    height: 1.5,
  ),
)

// Small Body
TextAppi(
  text: 'Small body text for secondary content',
  style: TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.normal,
    height: 1.4,
  ),
)

Caption and Labels

// Caption
TextAppi(
  text: 'Caption text',
  style: TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.normal,
    color: Colors.grey[600],
    height: 1.3,
  ),
)

// Label
TextAppi(
  text: 'LABEL TEXT',
  style: TextStyle(
    fontSize: 11,
    fontWeight: FontWeight.w600,
    letterSpacing: 1.5,
    color: Colors.grey[700],
  ),
)

Advanced Usage

Gradient Text

ShaderMask(
  shaderCallback: (bounds) => LinearGradient(
    colors: [Colors.blue, Colors.purple],
  ).createShader(bounds),
  child: TextAppi(
    text: 'Gradient Text',
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ),
)

Text with Shadow

TextAppi(
  text: 'Text with Shadow',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.white,
    shadows: [
      Shadow(
        offset: Offset(2, 2),
        blurRadius: 4,
        color: Colors.black.withOpacity(0.5),
      ),
    ],
  ),
)

Multiline Text with Custom Styling

TextAppi(
  text: 'This is a long text that will wrap to multiple lines and demonstrate the text wrapping capabilities of TextAppi widget.',
  style: TextStyle(
    fontSize: 16,
    height: 1.6,
    color: Colors.grey[800],
  ),
  maxLines: 3,
  overflow: TextOverflow.ellipsis,
  textAlign: TextAlign.justify,
)

Accessibility Features

TextAppi(
  text: 'Important Information',
  semanticsLabel: 'This is important information that users should know',
  style: TextStyle(fontSize: 16),
)

High Contrast Support

TextAppi(
  text: 'High Contrast Text',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
    color: MediaQuery.of(context).highContrast 
        ? Colors.black 
        : Theme.of(context).textTheme.bodyLarge?.color,
  ),
)

Text Scaling

TextAppi(
  text: 'Scalable Text',
  style: TextStyle(fontSize: 16),
  textScaleFactor: MediaQuery.of(context).textScaleFactor,
)

Best Practices

1. Use Semantic Text Styles

// Good: Use theme text styles
TextAppi(
  text: 'Heading',
  style: Theme.of(context).textTheme.headlineMedium,
)

// Avoid: Hard-coded styles
TextAppi(
  text: 'Heading',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

2. Provide Semantic Labels

// Good: Descriptive semantic label
TextAppi(
  text: '5★',
  semanticsLabel: 'Five star rating',
)

// Avoid: No semantic context
TextAppi(text: '5★')

3. Handle Text Overflow

// Good: Handle overflow gracefully
TextAppi(
  text: 'Very long text that might overflow',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

4. Use Consistent Typography

// Good: Consistent with design system
TextAppi(
  text: 'Consistent Text',
  style: DesignTokens.body1,
)

Common Use Cases

1. Page Titles

TextAppi(
  text: 'Page Title',
  style: Theme.of(context).textTheme.headlineLarge?.copyWith(
    fontWeight: FontWeight.bold,
  ),
  textAlign: TextAlign.center,
)

2. Card Content

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextAppi(
          text: 'Card Title',
          style: Theme.of(context).textTheme.titleLarge,
        ),
        SizedBox(height: 8),
        TextAppi(
          text: 'Card description with detailed information.',
          style: Theme.of(context).textTheme.bodyMedium,
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
        ),
      ],
    ),
  ),
)

3. Status Messages

TextAppi(
  text: 'Success! Your changes have been saved.',
  style: TextStyle(
    color: Colors.green[700],
    fontWeight: FontWeight.w500,
  ),
  semanticsLabel: 'Success message: Your changes have been saved',
)

BoxAppi - For text containers
TextFieldAppi - For text input
AnimatedBoxAppi - For animated text containers

Ready to enhance your text display? Check out BoxAppi for creating beautiful text containers!

Overview​

Features​

Basic Usage​

Properties​

Examples​

Basic Text​

Styled Text​

Responsive Text​

Themed Text​

Accessible Text​

Typography Variants​

Headings​

Body Text​

Caption and Labels​

Advanced Usage​

Gradient Text​

Text with Shadow​

Multiline Text with Custom Styling​

Accessibility Features​

Screen Reader Support​

High Contrast Support​

Text Scaling​

Best Practices​

1. Use Semantic Text Styles​

2. Provide Semantic Labels​

3. Handle Text Overflow​

4. Use Consistent Typography​

Common Use Cases​

1. Page Titles​

2. Card Content​

3. Status Messages​

Related Components​