I made a Flutter package that might help with this question called fxf.
To create the text you've written above, you can do the following:
import 'package:fxf/fxf.dart' as fxf;
class MyWidget extends StatelessWidget {
...
final String text = '''
~(0xff7c65c4)!(3,0,0xff7c65c4)Same!(d)~(d)
*(5)!(1,0,0xffff0000)textfield!(d)*(d)
`(1)different`(d)
~(0xffe787cc)!(1,0,0xffe787cc)styles!(d)~(d)
''';
Widget build(BuildContext context) {
return Center(
child: fxf.Text(text),
);
}
}
Which produces the following result: image of text with multiple styles
For example, on line ~(0xff7c65c4)!(3,0,0xff7c65c4)Same!(d)~(d)
, style command ~(0xff7c65c4)
changes the text color to a light purple, while ~(d)
returns the text back to its default black color. Likewise, !(3,0,0xff7c65c4)
adds a
strikethrough solid line with the same purple color, and !(d)
removes it.
More info on the style commands can be found on the fxf readme.