CurlText

CurlText is a lightweight, high-performance Flutter widget for adding stylish, customizable outlines (strokes) to your text. Perfect for UI elements that require high readability or a bold design touch.

pub package License: MIT

Features

  • Customizable Outlines: Easily control stroke width and color.
  • Custom Fonts: Support for fontWeight and fontFamily.
  • Text Layout Control: letterSpacing, wordSpacing, height, textAlign, maxLines, softWrap, overflow.
  • RTL Support: Optional textDirection for right-to-left languages (e.g. Arabic), falling back to the ambient Directionality when omitted.
  • Text Shadows: Add one or more Shadows to the rendered text.
  • Glow Animation: Optional animated glowing stroke via enableGlowAnimation, glowIntensity, glowColor and animationDuration.
  • Performance Focused: Uses an optimized stacking layer approach for smooth rendering.
  • Simple API: Named parameters aligned with common Flutter Text / TextStyle options for easy drop-in use.
  • Flexible Styling: Fully compatible with standard font configurations.

Getting Started

Add this package to your project by running:

flutter pub add curl_text

Usage

Basic example

import 'package:curl_text/curl_text.dart';

CurlTextWidget(
  text: 'Hello, CurlText!',
  fontSize: 32,
  fontWeight: FontWeight.bold,
  fontFamily: 'Roboto',
  strokeWidth: 3,
  strokeColor: Colors.black,
  textColor: Colors.white,
)

RTL text (e.g. Arabic)

Pass textDirection explicitly whenever the widget may render outside of an RTL Directionality context — otherwise it falls back to the ambient directionality, which may not be what you want.

CurlTextWidget(
  text: '123 مرحبا بالعالم',
  fontSize: 40,
  textColor: Colors.cyanAccent,
  strokeColor: Colors.deepPurple,
  strokeWidth: 7,
  fontWeight: FontWeight.w900,
  textDirection: TextDirection.rtl,
)

Letter spacing, line height & word spacing

CurlTextWidget(
  text: 'STYLISH TEXT',
  fontSize: 38,
  textColor: Colors.yellow,
  strokeColor: Colors.red,
  strokeWidth: 5,
  fontWeight: FontWeight.w900,
  letterSpacing: 6,
  height: 1.9,
  wordSpacing: 10,
)

maxLines and overflow

CurlTextWidget(
  text: 'Very long text that should be wrapped or truncated correctly',
  fontSize: 24,
  textColor: Colors.white,
  strokeColor: Colors.blue,
  strokeWidth: 4,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Text shadows

CurlTextWidget(
  text: 'SHADOW TEXT',
  fontSize: 50,
  textColor: Colors.white,
  strokeColor: Colors.green,
  strokeWidth: 4,
  fontWeight: FontWeight.bold,
  shadows: [
    Shadow(
      offset: Offset(3, 3),
      blurRadius: 8,
      color: Colors.greenAccent,
    ),
  ],
)

Animated glow

Enable enableGlowAnimation to make the stroke pulse between a soft and intense glow. Customize the glow color and speed independently from the base stroke.

CurlTextWidget(
  text: 'NEON TEXT',
  fontSize: 48,
  textColor: Colors.white,
  strokeColor: Colors.cyan,
  strokeWidth: 6,
  enableGlowAnimation: true,
  glowIntensity: 1.3,
  glowColor: Colors.cyanAccent,
  animationDuration: const Duration(milliseconds: 1200),
)

See example/curl_text_example.dart for a full demo screen combining all of the above.

Parameters

Parameter Type Required Description
text String yes The text to display
fontSize double yes Font size
textColor Color yes Fill color of the text
strokeColor Color yes Outline (stroke) color
strokeWidth double yes Outline (stroke) width
fontWeight FontWeight? no Font weight
fontFamily String? no Font family
letterSpacing double? no Extra spacing between letters
wordSpacing double? no Extra spacing between words
height double? no Line height multiplier
textAlign TextAlign? no Horizontal text alignment
textDirection TextDirection? no Text direction (LTR/RTL). Defaults to the ambient Directionality
maxLines int? no Maximum number of lines before truncating/overflowing
softWrap bool? no Whether the text should wrap at soft line breaks (defaults to true)
overflow TextOverflow? no How overflowing text is handled (defaults to TextOverflow.clip)
shadows List<Shadow>? no Shadows applied to the rendered text
enableGlowAnimation bool no Enables an animated pulsing glow on the stroke (defaults to false)
glowIntensity double no Peak blur intensity of the glow animation (defaults to 1.0)
glowColor Color? no Color of the glow stroke; falls back to strokeColor when omitted
animationDuration Duration no Duration of one glow pulse cycle (defaults to 1200ms)

Planned / Under Consideration

  • x fontWeight, fontFamily support
  • x Fill color (textColor)
  • x letterSpacing, textAlign, maxLines, overflow
  • x Text shadows
  • x RTL / textDirection support
  • x Animated glow effect
  • Gradient fill support
  • Multiple stroke layers (inner/outer outline)

Have a feature request? Open an issue — contributions welcome!

Contributing

Contributions, issues, and feature requests are welcome. Feel free to check the issues page or submit a pull request.

License

This project is licensed under the MIT License — see the LICENSE file for details.

Libraries

curl_text
main