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.

Libraries

core/effect
core/text_builder
effects/gradient
effects/outline
effects/shadow
text_kit
TextKit - A Flutter package for beautiful text effects.