Flutter Richtext Widget Example Tutorial

Sep 06, 2022

.

Admin

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...

#Flutter