🖌️ dual_tone_text #

Render sharp dual-colored text in Flutter — vertically, horizontally, radially, or now with a wave-shaped horizontal split for an artistic twist. Perfect for eye-catching UIs, headers, and creative text effects.

✨ Fully null-safe and supports international text.

🚀 Features #

✅ Sharp vertical split (top/bottom)
✅ Solid horizontal split (left/right)
✅ Powerful radial center-out split
✅ Sinusoidal wave split — wavy horizontal cutoff
✅ 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.6

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
)

🌊 Wave Split (Wavy Horizontal Cutoff) #

WaveSplitText(
  text: 'WAVY TEXT',
  style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
  topColor: Colors.blue,
  bottomColor: Colors.red,
  amplitude: 8.0,   // Wave height
  frequency: 2.0,   // Number of waves
)

🌐 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 #

💡 Roadmap #

• ✅ Vertical Split
• ✅ Horizontal Split
• ✅ Radial Split
• ✅ Wave Split
• ✅ Checker Text
• ✅ Character-based Split
• ✅ 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 fully supported.

📁 Example #

Clone or open the example/ folder and run:

flutter run

🎉 Check Out My Other Packages! #

Explore more Flutter packages by Katayath Sai Kiran to add unique UI effects and functionality to your apps.

👨‍💻 Maintainer #

Developed with 💙 by Katayath Sai Kiran 📬 Contributions and suggestions are always welcome!