Flutter Multi-Color Text Demo

main.dart

// To learn more visit - https://www.akshatapp.com/tutorials/flutter-tutorial

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Multi-Color Text Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('Flutter Multi-Color Text Demo'),
        ),
        body: Center(child: RichText(text: myText)),
    );
  }
}

final TextSpan myText = TextSpan(
  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
  children: [
    TextSpan(
      text: 'Flutter',
      style: TextStyle(
        color: Color(0xFFD50000),
      ),
    ),
    TextSpan(
      text: 'Multi-Color',
      style: TextStyle(
        color: Color(0xFF00AF19),
      ),
    ),
    TextSpan(
      text: 'Text',
      style: TextStyle(
        color: Color(0xFF0D47A1),
      ),
    ),
  ],
);