06-Sep-2022
.
Admin
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