TextSpan Widget in Flutter

Difficulty Level : Expert
Last Updated : 01 Jul, 2021

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 an 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.
hashCode: This parameter takes in an int value as the object to provide a hash code to the TextSpan widget. Hash code is an integer value that represents the state of the object that effect operator == comparison.
runtimeType: This property takes in a Type as the object to represent the runtime type of the object. This property supports null safety.

Example:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?

Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

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

Explanation:

Create TextSpan widget and wrap it with Text.rich() widget.
Give the text to the TextSpan and add more inline children to it.
Give style to the text and see the output.

Methods:

build(ParagraphBuilder builder, {double textScaleFactor: 1.0, List<PlaceholderDimensions>? dimensions})

@override
void build (
ParagraphBuilder builder,
{double textScaleFactor: 1.0,
List<PlaceholderDimensions>? dimensions}
)
override

This build method helps in building drawing the paragraph objects. Paragraph can be obtained by applying the style, text and children of this object to the given ParagraphBuilder.

compareTo(InlineSpan other) → RenderComparison

@override
RenderComparison compareTo (
InlineSpan other
)
override

This method returns the difference between this span and another, in terms of the damage that can be made to the rendering.

toStringShort() → String

@override
String toStringShort ()
override

This method gives a concise description of the object, which are usually the runtimeType and the hashCode.

visitChildren(InlineSpanVisitor visitor) → bool

@override
bool visitChildren (
InlineSpanVisitor visitor
)
override

This method moves this TextSpan and its child in pre-order and calls visitor for each span that has text.

Operator:

operator ==(Object other) → bool

@override
bool operator == (
Object other
)
override

The equality operator.

The default action for all Objects is to return true if and only if this object and other are the same object. This method is overridden to define a different equality relation on a class.

My Personal Notes

Related Articles