Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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