Flutter RichText Widget (original) (raw)

Last Updated : 28 Feb, 2025

The **RichText widget is used to display text that uses various different styles. The displayed text is described using a tree of **TextSpan objects, each of which has its own associated style that is used for that _subtree. Depending on the layout constraints the text might break across multiple lines or might all be displayed on the same line.

Constructor:

RichText RichText({
Key? key,
required InlineSpan text,
TextAlign textAlign = TextAlign.start,
TextDirection? textDirection,
bool softWrap = true,
TextOverflow overflow = TextOverflow.clip,
double textScaleFactor = 1.0,
TextScaler textScaler = TextScaler.noScaling,
int? maxLines,
Locale? locale,
StrutStyle? strutStyle,
TextWidthBasis textWidthBasis = TextWidthBasis.parent,
TextHeightBehavior? textHeightBehavior,
SelectionRegistrar? selectionRegistrar,
Color? selectionColor,
})

Properties:

Property Description
children The widgets below this widget in the tree
hashCode The hash code for this object
key Controls how one widget replaces another widget in the tree
runtimeType A representation of the runtime type of the object
text The text to display in this widget
textAlign How the text should be aligned horizontally
locale This property takes in Locale class as the object. It controls the font used for the text depending on the language used
maxLines The maxLines property takes in an int value as the object. It controls the maximum number of lines that can be there for the text to expand and wrap
overflow TextOverflow enum is the object given to its class it controls the text in case of overflow
softWrap This property takes in a boolean value as the object. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
textDirection This property takes in TextDirection class as the object to decide the direction of the text. It can be either from left-to-right or right-to-left
textHeightBehavior TextHeightBehavior class is the object given to this property. It Defines how to apply TextStyle.height over and under text
textScaler This property is taken in a double value as the object to Creates a paragraph of rich text.
textWidthBasis TextWidthBasis enum is the object of this property. It defines how to measure the width of the rendered text

**Example:

Dart `

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

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

}

class MyHomePAGE extends StatefulWidget { const MyHomePAGE({Key? key}) : super(key: key);

@override
_MyHomePAGEState createState() => _MyHomePAGEState();

}

class _MyHomePAGEState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('GeeksforGeeks'), foregroundColor: Colors.white, backgroundColor: Colors.green,), body: Center( child: RichText(

        // Controls visual overflow
        overflow: TextOverflow.clip,

        // Controls how the text should be aligned horizontally
        textAlign: TextAlign.end,

        // Control the text direction
        textDirection: TextDirection.rtl,

        // Whether the text should break at soft line breaks
        softWrap: true,

        // Maximum number of lines for the text to span
        textScaler: TextScaler.linear(1),
        maxLines: 1,
        text: TextSpan(
        text: 'Hello ',
        style: DefaultTextStyle.of(context).style,
        children: const <TextSpan>[
            TextSpan(
                text: 'Geeks', style: TextStyle(fontWeight: FontWeight.bold)),
        ],
        ), 
    )),
    backgroundColor: Colors.lightBlue[50],
    );
}

}

`

**Output:

Richtext in flutter

**Explanation of the above Program:

  1. Create a stateless widget as the main widget of the app.
  2. Define a class representing the home screen using a stateful widget.
  3. Define the _appbar inside a _scaffold widget.
  4. Place the _Richtext widget in the body with _Center widget.