TextComponent

TextComponent is a Flutter package designed to simplify text customization by extending the capabilities of Flutter's built-in Text widget. With full support for rich styling, accessibility, and responsive text scaling, TextComponent makes it easier to build beautiful and consistent UI elements for your Flutter apps.

Features

  • Full Customization: Supports all essential TextStyle properties such as:
    • color, fontSize, fontWeight, fontStyle
    • letterSpacing, wordSpacing, shadows, and decoration
  • Text Overflow Handling: Easily manage text overflow with options like ellipsis, fade, or clip.
  • Responsive Design: Built-in textScalar support for responsive text scaling.
  • Accessibility: Includes properties for locale, semanticsLabel, and textDirection.
  • Rich Text Styling: Supports advanced text styles like decorationThickness, leadingDistribution, and fontVariations.

Getting Started

To use this package, add text_component as a dependency in your pubspec.yaml file:

Usage

import 'package:flutter/material.dart';
import 'package:text_component/text_component.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('TextComponent Example')),
        body: const Center(
          child: TextComponent(
            text: 'Hello, TextComponent!',
            fontSize: 24,
            color: Colors.blue,
            fontWeight: FontWeight.bold,
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}

Applying Custom Styling

TextComponent(
  text: 'Stylish Text',
  fontSize: 18,
  fontWeight: FontWeight.w600,
  fontStyle: FontStyle.italic,
  letterSpacing: 1.5,
  decoration: TextDecoration.underline,
  color: Colors.red,
);

Managing Text Overflow

 TextComponent(
  text: 'This is a long text that might overflow the container.',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

Adding Shadows

 TextComponent(
  text: 'Shadowed Text',
  shadows: [
    Shadow(
      offset: Offset(2, 2),
      blurRadius: 4,
      color: Colors.black.withOpacity(0.5),
    ),
  ],
);

Key Improvements:

  1. Added a clear description of the package.
  2. Highlighted key features with examples.
  3. Provided a getting started section to help users integrate the package.
  4. Added code snippets to demonstrate usage.
  5. Included additional information about contributions, issues, and licensing.

Let me know if you’d like me to further refine any part of this!

License

This project is licensed under the MIT License. See the LICENSE file for more details.

dependencies:
  text_component: ^1.0.0

Libraries

text_component