CustomText #

A versatile text display widget with advanced features like read-more functionality, text selection, and customizable styling.

Features #

• Multiple Display Modes:
  • Standard text with ellipsis
  • Read-more/read-less functionality
  • Selectable text content
• Customizable Styling:
  • Independent styles for main text and read-more controls
  • Customizable expand/collapse labels
  • Clickable text support
• Layout Control:
  • Configurable margins
  • Text alignment options
  • Max lines control
• Accessibility:
  • Disables text scaling
  • Supports text selection
  • Customizable touch targets

Installation #

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_text: ^0.0.2

Basic Usage #

// Standard text
CustomText(
  txtName: "Hello World",
  style: TextStyle(fontSize: 16),
)

// Read-more text
CustomText(
  txtName: longText,
  isReadMore: true,
  maxLines: 3,
  style: TextStyle(color: Colors.black),
)

// Selectable text
CustomText(
  txtName: "Copy this text",
  isSelectableText: true,
  style: TextStyle(fontSize: 14),
)

Complete Example #

Column(
  children: [
    // Standard text with margin
    CustomText(
      txtName: "This is a simple text widget",
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      margin: EdgeInsets.only(bottom: 16),
    ),

    // Read-more text with custom styling
    CustomText(
      txtName: veryLongText,
      isReadMore: true,
      maxLines: 2,
      style: TextStyle(color: Colors.grey[800], fontSize: 14),
      moreStyle: TextStyle(color: Colors.blue),
      lessStyle: TextStyle(color: Colors.green),
      trimCollapsedText: "Show more...",
      trimExpandedText: "Show less...",
    ),

    // Clickable selectable text
    CustomText(
      txtName: "Tap to copy this text",
      isSelectableText: true,
      onTap: () => Clipboard.setData(ClipboardData(text: "Tap to copy this text")),
      style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
    ),
  ],
)

Parameter Reference #

Core Properties #

Display Modes #

Read-More Customization #

Layout & Interaction #

Advanced Usage #

Custom Read-More Implementation #

CustomText(
  txtName: longArticleText,
  isReadMore: true,
  maxLines: 3,
  trimCollapsedText: "Continue reading...",
  trimExpandedText: "Collapse article",
  moreStyle: TextStyle(
    color: Theme.of(context).primaryColor,
    fontWeight: FontWeight.w600,
  ),
  lessStyle: TextStyle(
    color: Colors.grey[600],
    fontStyle: FontStyle.italic,
  ),
)

Themed Text Widgets #

Create a consistent text style across your app:

class AppTextStyles {
  static const body = TextStyle(
    fontSize: 14,
    color: Colors.black87,
  );

  static const title = TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  );
}

// Usage
CustomText(
  txtName: "App Title",
  style: AppTextStyles.title,
)

Best Practices #

1. Performance:

   • Avoid unnecessary text widget rebuilds
   • For very long texts, consider isReadMore to improve performance
   • Use const constructors where possible

2. Accessibility:

   • Ensure sufficient color contrast
   • Maintain readable font sizes
   • Provide adequate touch targets for interactive text

3. Internationalization:

   • Make sure trim texts are localized
   • Consider RTL (right-to-left) text alignment needs

Migration Guide #

When updating from previous versions:

• The widget now uses the readmore package for expand/collapse functionality
• Text scaling is now disabled by default
• Added support for text selection
• Improved parameter naming consistency