TextSpan Widget Flutter - DevhubSpot

A TextSpan object can be styled using its style property. The style will be applied to the text and the children.

A TextSpan object can just have plain text, or it can have children TextSpan objects with their own styles that (possibly only partially) override the style of this object. If a TextSpan has both text and children, then the text is treated as if it was an un-styled TextSpan at the start of the children list. Leaving the TextSpan.text field null results in the TextSpan acting as an empty node in the InlineSpan tree with a list of children.

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 gave to the text.

recognizer: The gesture detector when the 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 affects 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.

Implementation with Example:

Main.dart

import 'package:counterapp/widgets/TextSpanWidget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TextSpanWidget()
    );
  }
}

WrapWidget.dart

import 'package:flutter/material.dart';

class TextSpanWidget extends StatefulWidget {
  const TextSpanWidget({super.key});

  @override
  State<TextSpanWidget> createState() => _TextSpanWidgetState();
}

class _TextSpanWidgetState extends State<TextSpanWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Center(
            child: Text.rich(
              TextSpan(
                text: "DevhubSpot ",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black87
                ),
                children: [
                  TextSpan(
                    text: "Developer Community",
                    style: TextStyle(
                      fontWeight: FontWeight.w700,
                      color: Colors.orangeAccent
                    )
                  ),
                  TextSpan(
                    text: " :)",
                    style: TextStyle(
                      fontWeight: FontWeight.w700,
                      color: Colors.purpleAccent
                    )
                  )
                ]
              )
            ),
          ),
        )
      ),
    );
  }

Result: