TextSpan Widget in Flutter

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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],
    );
  }
}

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.