TextKit

A Flutter package providing easy-to-use text widgets with beautiful visual effects including gradients, shadows, and outlines.

Features

• GradientText - Text with gradient color effects
• ShadowText - Text with customizable shadow effects
• StrokeText - Text with outline/stroke effects

Installation

Add textkit to your pubspec.yaml:

dependencies:
  textkit: ^1.0.0

Then run:

flutter pub get

Usage

Import the package

import 'package:textkit/text_kit.dart';

GradientText

Display text with gradient colors:

GradientText(
  'Hello World',
  colors: [Colors.blue, Colors.purple],
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

Parameters:

• text (required) - The text to display
• colors (required) - List of colors for the gradient
• stops (optional) - Gradient color stops
• begin (optional) - Gradient start alignment (default: Alignment.centerLeft)
• end (optional) - Gradient end alignment (default: Alignment.centerRight)
• tileMode (optional) - Gradient tile mode (default: TileMode.clamp)
• style (optional) - Text style
• textAlign (optional) - Text alignment
• textDirection (optional) - Text direction
• maxLines (optional) - Maximum number of lines
• overflow (optional) - Text overflow handling

Example with vertical gradient:

GradientText(
  'Vertical Gradient',
  colors: [Colors.red, Colors.orange, Colors.yellow],
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  style: TextStyle(fontSize: 28),
)

ShadowText

Display text with shadow effects:

ShadowText(
  'Hello World',
  shadows: [
    Shadow(
      offset: Offset(2, 2),
      blurRadius: 4,
      color: Colors.black54,
    ),
  ],
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

Parameters:

• text (required) - The text to display
• shadows (required) - List of Shadow objects
• style (optional) - Text style
• textAlign (optional) - Text alignment
• textDirection (optional) - Text direction
• maxLines (optional) - Maximum number of lines
• overflow (optional) - Text overflow handling

Example with multiple shadows:

ShadowText(
  'Multiple Shadows',
  shadows: [
    Shadow(
      offset: Offset(2, 2),
      blurRadius: 4,
      color: Colors.black54,
    ),
    Shadow(
      offset: Offset(-2, -2),
      blurRadius: 4,
      color: Colors.blue,
    ),
  ],
  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
)

Example with glow effect:

ShadowText(
  'Glow Effect',
  shadows: [
    Shadow(
      offset: Offset.zero,
      blurRadius: 10,
      color: Colors.purple,
    ),
    Shadow(
      offset: Offset.zero,
      blurRadius: 20,
      color: Colors.purple.withOpacity(0.5),
    ),
  ],
  style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
)

StrokeText

Display text with outline/stroke effects:

StrokeText(
  'Hello World',
  strokeColor: Colors.black,
  strokeWidth: 2.0,
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
)

Parameters:

• text (required) - The text to display
• strokeColor (required) - Color of the stroke/outline
• strokeWidth (required) - Width of the stroke/outline
• fillText (optional) - Whether to fill the text (default: true)
• style (optional) - Text style
• textAlign (optional) - Text alignment
• textDirection (optional) - Text direction
• maxLines (optional) - Maximum number of lines
• overflow (optional) - Text overflow handling

Example with stroke only (no fill):

StrokeText(
  'Stroke Only',
  strokeColor: Colors.red,
  strokeWidth: 2.5,
  fillText: false,
  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
)

Examples

See the example directory for a complete example app demonstrating all three widgets with various configurations.

License

This package is licensed under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.