Open In App

Flutter - RichText Widget

Last Updated : 28 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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<MyHomePAGE> {
    @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.

D
ddeevviissaavviittaa
Improve
Article Tags :

Explore

Lightbox