TextSpan Widget in Flutter
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:
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@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:
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:
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...