Display a few words in different colors in Flutter
Use RichText, TextSpan and TextStyle as i explained in below picture.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Center(
child: RichText(
text: TextSpan(
text: 'Default',
style: TextStyle(color: Colors.red), /*defining default style is optional */
children: <TextSpan>[
TextSpan(
text: ' bold', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(
text: ' colorful',
style: TextStyle(color: Colors.lightGreenAccent)),
TextSpan(
text: ' large',
style: TextStyle(color: Colors.cyanAccent, fontSize: 40)),
],
),
),
),
);
}
}
Use RichText class
var text = new RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(text: 'Hello'),
new TextSpan(text: 'World', style: new TextStyle(fontWeight: FontWeight.bold)),
],
),
);