Skip to content
Related Articles

Related Articles

Improve Article
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

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.
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!



My Personal Notes arrow_drop_up
Recommended Articles
Page :