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.
  	@override
  	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);

  	@override
	// ignore: library_private_types_in_public_api
  	_MyHomePAGEState createState() => _MyHomePAGEState();
}

class _MyHomePAGEState extends State<MyHomePAGE> {
  	@override
  	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>[
                			TextSpan(
	                    		text: ' Widget Example', style: TextStyle(fontWeight: FontWeight.bold)),
              			],
            		),
          		)
          	),
    	  	backgroundColor: Colors.white,
    	);
  	}
}

class MyClip extends CustomClipper<Rect> {
  	@override
  	Rect getClip(Size size) {
	    return const Rect.fromLTWH(0, 0, 100, 100);
  	}

  	@override
  	bool shouldReclip(oldClipper) {
	    return false;
  	}
}

Step 3: Run this Debug App

I hope it can help you...