ποΈ dual_tone_text
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
π‘ Roadmap
xVertical SplitxHorizontal SplitxRadial SplitxChecker TextxCharacter-based SplitxWord-based SplitDiagonal Split (β / β)Text Stroke or Border SplitN-Color Sectional SplitAnimation support for transitionsEmoji-safe, RTL and multi-line supportCanvas-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!