TextSpan Widget in Flutter

Difficulty Level : Expert
Last Updated : 30 Aug, 2020

TextSpan is an immutable span of text. It has style property to give style to the text. It is also having children property to add more text to this widget and give style to the children. Let’s understand this with the help of example.

Constructors:

Syntax:
TextSpan({String text, 
List<InlineSpan> children, 
TextStyle style, 
GestureRecognizer recognizer, 
String semanticsLabel})

Properties:

text: The text contained in the span.
children: More spans to include as children.
style: The TextStyle given to the text.
recognizer: The gesture detector when user hit the TextSpan widget.
semanticsLabel: An alternative semantic label for this widget.

Example:

Dart

import 'package:flutter/material.dart'; 
  
void main() { 
  runApp(MyApp()); 
} 
  
class MyApp extends StatelessWidget { 
  // This widget is  
  //the root of your application. 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'TextSpan', 
      theme: ThemeData( 
        primarySwatch: Colors.blue, 
      ), 
      home: MyHomePage(), 
      debugShowCheckedModeBanner: false, 
    ); 
  } 
} 
  
class MyHomePage extends StatefulWidget { 
  @override 
  _MyHomePageState createState() => _MyHomePageState(); 
} 
  
class _MyHomePageState extends State<MyHomePage> { 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text('GeeksforGeeks'), 
        backgroundColor: Colors.green 
        ), 
        body: Center( 
          child: Text.rich( 
            TextSpan( 
              text: 'This is textspan ', 
              children: <InlineSpan>[ 
                TextSpan( 
                  text: 'Widget in flutter', 
                  style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold), 
                ) 
              ] 
            ) 
          ), 
        ), 
        backgroundColor: Colors.lightBlue[50], 
    ); 
  } 
}

Output:

If the properties are defined as below:

TextSpan(
              text: 'This is textspan ',
              style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
              children: <InlineSpan>[
                TextSpan(
                  text: 'Widget in flutter',
                )
              ]
            )

The following design changes can be observed:

full textspan in flutter

If the properties are defined as below:

TextSpan(
              text: 'This is textspan ',
              children: <InlineSpan>[
                TextSpan(
                  text: 'Widget in flutter',
                  style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
                )
              ]
            )

The following design changes can be observed:

textspan in flutter