Flutter Richtext Widget Example Tutorial

Sep 06, 2022



Flutter Richtext Widget Example Tutorial

Hello Friends,

Today, flutter richtext widget example tutorial is our main topic. I would like to show you flutter using richtext widget examples. This tutorial will give you a simple example of using richtext and textspan in a flutter. This post will give you a simple example of how to use richtext in a flutter tutorial.

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.

Step 1: Create Flutter Project

Follow along with the setup, you will be creating an Flutter app.

- $flutter create flutter_circular_progress_indicator_example

Navigate to the project directory:

- $cd flutter_richtext_widget_example

Step 2: Main File

Create a main.dart file in the lib directory

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.


Widget build(BuildContext context) {

return MaterialApp(

title: 'ClipOval',

theme: ThemeData(

primarySwatch: Colors.blue,


home: const MyHomePAGE(),

debugShowCheckedModeBanner: false,




class MyHomePAGE extends StatefulWidget {

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


// ignore: library_private_types_in_public_api

_MyHomePAGEState createState() => _MyHomePAGEState();


class _MyHomePAGEState extends State<MyHomePAGE> {


Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('RichText Widget Example'),

backgroundColor: Colors.blue,


body: Center(

child: RichText(

// Controls visual overflow

overflow: TextOverflow.clip,

// Controls how the text should be aligned horizontally

textAlign: TextAlign.center,

// Whether the text should break at soft line breaks

softWrap: true,

// Maximum number of lines for the text to span

maxLines: 3,

// The number of font pixels for each logical pixel

textScaleFactor: 1,

text: TextSpan(

text: 'RichText',

style: DefaultTextStyle.of(context).style,

children: const <TextSpan>[


text: ' Widget Example', style: TextStyle(fontWeight: FontWeight.bold)),





backgroundColor: Colors.white,




class MyClip extends CustomClipper<Rect> {


Rect getClip(Size size) {

return const Rect.fromLTWH(0, 0, 100, 100);



bool shouldReclip(oldClipper) {

return false;



Step 3: Run this Debug App

I hope it can help you...