Custom TextEditingController to style multi color icon font
class AppTextEditingController extends TextEditingController { | |
@override | |
TextSpan buildTextSpan({TextStyle style, bool withComposing}) { | |
final TextSpan textSpan = | |
super.buildTextSpan(style: style, withComposing: withComposing); | |
if (text != null) { | |
return _buildEmojiTextSpan(text); | |
} | |
return textSpan; | |
} | |
// Get emoji color from code | |
Color _getEmojiColor(int emojiCode) { | |
switch (emojiCode) { | |
case 0xe900: | |
return const Color(0xFFFFD243); | |
case 0xe901: | |
return const Color(0xFFFF39AF); | |
case 0xe902: | |
return const Color(0xFF2CD7FF); | |
} | |
return null; | |
} | |
// Build text span | |
TextSpan _buildEmojiTextSpan(String text) { | |
if (text == null) { | |
return const TextSpan(); | |
} | |
final List<TextSpan> children = <TextSpan>[]; | |
// integer Unicode code points | |
final Runes runes = text.runes; | |
final List<int> chunk = <int>[]; | |
for (int i = 0; i < runes.length; i++) { | |
final int code = runes.elementAt(i); | |
// print('code ${code.toRadixString(16)}'); | |
// we assume that everything that is not | |
// in Extended-ASCII set is an emoji... | |
final bool isEmoji = code > 255; | |
if (!isEmoji) { | |
chunk.add(code); | |
} | |
if (isEmoji || i == runes.length - 1) { | |
children.add( | |
TextSpan( | |
text: String.fromCharCodes(chunk), | |
style: const TextStyle(), | |
), | |
); | |
chunk.clear(); | |
if (isEmoji) { | |
children.add( | |
TextSpan( | |
text: String.fromCharCode(code), | |
style: TextStyle( | |
fontFamily: 'nft', | |
color: _getEmojiColor(code), | |
), | |
), | |
); | |
} | |
} | |
} | |
return TextSpan(children: children); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment