text_component 1.0.0
text_component: ^1.0.0 copied to clipboard
A customizable Flutter widget for displaying text with advanced styling options such as font size, color, decoration, and more.
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
TextStyleproperties such as:color,fontSize,fontWeight,fontStyleletterSpacing,wordSpacing,shadows, anddecoration
- Text Overflow Handling: Easily manage text overflow with options like
ellipsis,fade, orclip. - Responsive Design: Built-in
textScalarsupport for responsive text scaling. - Accessibility: Includes properties for
locale,semanticsLabel, andtextDirection. - Rich Text Styling: Supports advanced text styles like
decorationThickness,leadingDistribution, andfontVariations.
📦 Installation #
Add this to your pubspec.yaml:
dependencies:
text_component: ^1.0.0
🧩 Getting Started #
Simply import the package in your Dart file:
import 'package:text_component/text_component.dart';
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: #
- Added a clear description of the package.
- Highlighted key features with examples.
- Provided a getting started section to help users integrate the package.
- Added code snippets to demonstrate usage.
- Included additional information about contributions, issues, and licensing.
License #
This project is licensed under the MIT License. See the LICENSE file for more details.
MIT License
Copyright (c) 2025 Raihan Sikdar
Permission is hereby granted, free of charge, to any person obtaining a copy...