TextSpan Widget in Flutter

TextSpan Widget


  • Rich Text
  • Text.rich




A TextSpan object can just have plain text, or it can have children TextSpan objects with their styles that override the style of this obiect.


A TextSpan object can be styled using its style property. The style will be applied to the text and the children.




import 'package:flutter/material.dart';

void main() {



      home: Scaffold(

        appBar: AppBar(

          title: const Text(

            'Sample App',



        body: const Center(

          child: Text.rich(


              text: 'Hello',

              style: TextStyle(fontSize: 20),

              children: [


                    text: 'World',

                    style: TextStyle(fontSize: 40, color: Colors.blue)),

                TextSpan(text: ' !', style: TextStyle(fontSize: 50))










Video Link:

Post a Comment (0)
Previous Post Next Post