How to Set Different Styles in Line with RichText in Flutter

In this example, we are going to show you how to set multiple or different styles on a single line of text using RichText in Flutter. The Text() widget has no ability to put different styles of different sections of sentences.

Method 1: Multiple Styles in Line with RichText

RichText(
  text: TextSpan(
      style: TextStyle(color: Colors.redAccent), //style for all textspan
      children: [ 
          TextSpan(text:"Hi! This is FlutterCampus", style: TextStyle(fontSize: 25)),
          TextSpan(text:"You can learn to build"),
          TextSpan(text:" Mobile Apps", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          TextSpan(text:" with Flutter", style: TextStyle(color: Colors.blueAccent, fontSize: 30))
      ]
  )
)  

Method 2: Different Styles in Line with Text.rich:

Text.rich(
  style: TextStyle(color: Colors.purpleAccent), //style for all textspan
  TextSpan(
      children: [ 
          TextSpan(text:"Hi! This is FlutterCampus", style: TextStyle(fontSize: 25)),
          TextSpan(text:"You can learn to build"),
          TextSpan(text:" Mobile Apps", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          TextSpan(text:" with Flutter", style: TextStyle(color: Colors.blueAccent, fontSize: 30))
      ]
  )
)

Output of this code:

Full Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Multiple Styles in Line"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topCenter,
            child: Column(
              children: [

                Text.rich(
                  style: TextStyle(color: Colors.purpleAccent), //style for all textspan
                  TextSpan(
                     children: [ 
                         TextSpan(text:"Hi! This is FlutterCampus", style: TextStyle(fontSize: 25)),
                         TextSpan(text:"You can learn to build"),
                         TextSpan(text:" Mobile Apps", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                         TextSpan(text:" with Flutter", style: TextStyle(color: Colors.blueAccent, fontSize: 30))
                     ]
                  )
                ),

                RichText(
                  text: TextSpan(
                     style: TextStyle(color: Colors.redAccent), //style for all textspan
                     children: [ 
                         TextSpan(text:"Hi! This is FlutterCampus", style: TextStyle(fontSize: 25)),
                         TextSpan(text:"You can learn to build"),
                         TextSpan(text:" Mobile Apps", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                         TextSpan(text:" with Flutter", style: TextStyle(color: Colors.blueAccent, fontSize: 30))
                     ]
                  )
                )  
            ],)
          )
       );
  }
}

In this way, you can set different styles on text line in Flutter using RichText.