Display a few words in different colors in Flutter

Question

I am writing an application which shows a few words in different colors in flutter.

I tried to load HTML files using the plugin flutter_html_view but that one doesn't support styles(inline). I also tried to use markdown.

How can I achieve this?

Answer 1

You can achieve this by using a RichText class class with TextStyle class

RichText widget helps to answer and achieve the above cases

RichText(
  textAlign: TextAlign.center,
  text: TextSpan(children: <TextSpan>[
     TextSpan(
       text: "I agree to the ",
       style: TextStyle(color: Colors.black87)),
     TextSpan(
       text: "Terms and Conditions",
       style: TextStyle(
          color: Colors.deepPurple,
           fontWeight: FontWeight.bold)),
   ]),
)

Answer 2

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)),
            ],
          ),
        ),
      ),
    );
  }
}