Banner

πŸ–ŒοΈ dual_tone_text

Pub Version GitHub

Render sharp dual-colored text in Flutter β€” vertically, horizontally, or radially split with solid cutoff (not gradient). Perfect for high-impact UIs, headers, or artistic effects.

✨ Fully null-safe and supports international text.

πŸš€ Features

βœ… Sharp vertical split (top/bottom) βœ… Solid horizontal split (left/right) βœ… Powerful radial center-out split βœ… Per-character split (change color after n characters) βœ… Checkerboard style (alternating color blocks) βœ… Per-word dual tone (each word switches color) βœ… No blending β€” hard color switch βœ… Custom percentage-based control βœ… Works with any Text widget βœ… Designed for performance

πŸ”§ Installation

Add to your pubspec.yaml:

dependencies:
  dual_tone_text: ^0.0.5

Then run:

flutter pub get

πŸ§ͺ Usage

πŸ”½ Vertical Split (Top–Bottom)

DualToneText(
  text: Text(
    'WELCOME',
    style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold, color: Colors.black),
  ),
  bottomColor: Colors.orange,
  splitPercentage: 0.5, // Half black, half orange
  splitType: SplitType.vertical,
)

➑ Horizontal Split (Left–Right)

DualToneText(
  text: Text(
    'WELCOME',
    style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold, color: Colors.blue),
  ),
  bottomColor: Colors.green,
  splitPercentage: 0.6, // 60% blue (left), 40% green (right)
  splitType: SplitType.horizontal,
)

πŸŒ€ Radial Split (Center Out)

RadialSplitText(
  text: Text(
    'WELCOME',
    style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold, color: Colors.white),
  ),
  outerColor: Colors.red,
  radiusCutoff: 0.4, // Inner 40% white, outer 60% red
)

🌐 Per-Character Dual Tone

DualToneTextByChar(
  text: "Hello World",
  style: TextStyle(fontSize: 24),
  topColor: Colors.red,
  bottomColor: Colors.blue,
  splitAt: 8,
)

πŸ”³ Checkerboard Pattern

DualToneCheckerboardText(
  text: "Checkerboard",
  style: TextStyle(fontSize: 24),
  color1: Colors.green,
  color2: Colors.orange,
)

πŸͺ„ Split Per Word

DualToneWordSplitText(
  text: "Split Per Word",
  style: TextStyle(fontSize: 24),
  color1: Colors.purple,
  color2: Colors.teal,
)

πŸ“· Preview

Vertical Split Screenshot Horizontal Split Radial Split Radial Split

πŸ’‘ Roadmap

  • x Vertical Split
  • x Horizontal Split
  • x Radial Split
  • x Checker Text
  • x Character-based Split
  • x Word-based Split
  • Diagonal Split (β†˜ / β†–)
  • Text Stroke or Border Split
  • N-Color Sectional Split
  • Animation support for transitions
  • Emoji-safe, RTL and multi-line support
  • Canvas-based rendering for custom shapes

🌍 Internationalization

βœ… Supports Unicode and multilingual characters. 🎌 Text like Arabic, Chinese, and Hindi is supported.

πŸ“ Example

Clone or open the example/ folder and run:

flutter run

πŸ‘¨β€πŸ’» Maintainer

Developed with πŸ’™ by Katayath Sai Kiran πŸ“¬ Feel free to contribute or suggest improvements!