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