i see this code for rich text in flutter:
return Row(
children: <Widget>[
?
Container(
child: RichText(
text: TextSpan(
text: "Hello",
style: TextStyle(fontSize: 20.0,color: Colors.black),
children: <TextSpan>[
TextSpan(text:"Bold"),
style: TextStyle( fontSize: 10.0, color: Colors.grey),
),
],
),
),
)
this print
Hellobold
but i need to separe both text one aling to left other to right, like this
Hello bold
how i do this?
thanks
I don't know your exact Use Case - But One way of getting what you require:
Row(
children: <Widget>[
Expanded(
child: RichText(
text: TextSpan(children: [
TextSpan(text: 'Singh', style: TextStyle(fontSize: 22.0,color: Colors.grey))
])),
),
RichText(
text: TextSpan(children: [
TextSpan(text: 'Kaur', style: TextStyle(fontSize: 28.0,color: Colors.redAccent))
])),
],
),
if you want to use textalign in RichText use WidgetSpan and Text widget
WidgetSpan(
child: Text(
'your text',
textAlign: TextAlign.left,
textDirection: TextDirection.ltr,
),
),
I think this will can help you:
RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Padding(
padding: const EdgeInsets.fromLTRB(1, 10, 10, 0),
child: Icon(
Icons.developer_mode_sharp,
),
),
),
TextSpan(
text: ' Tinkle is Powered By:',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
],
),
),
Text(
'Together Marketing Agency',
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 16, color: Colors.black, fontWeight: FontWeight.w500),
),
To Align your Text when using RichText widget, Simply add textAlign: TextAlign() to your RichText Property.
return Row(
children: <Widget>[
?
Container(
child: RichText(
textAlign: TextAlign.justify //You can change it to any aligment style that you want.
text: TextSpan(
text: "Hello",
style: TextStyle(fontSize: 20.0,color: Colors.black),
children: <TextSpan>[
TextSpan(text:"Bold"),
style: TextStyle( fontSize: 10.0, color: Colors.grey),
),
],
),
),
)
Container(
width: double.infinity,
child: Text.rich(
TextSpan(
text: 'This is a ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: 'bold',
style: TextStyle(fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
// Handle the tap event
},
),
TextSpan(text: ' and normal text'),
],
),
textAlign: TextAlign.center,
),
)
Related
I am having difficulties to align my icons with my two lines rich text in Flutter. As you can seen in the picture below, I want to align my ONE richtext widget with ONE icon. Example: Richtext containing "Revision Notes" and "Free notes." should be in the same line as the green icon tick. If I try using just one liner of text, the tick will align with it, but now if I have two liners rich text, it won't align.
Appreciate any help!
Picture:
Code:
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: 'Revision notes\n',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold)),
TextSpan(text: 'Free notes.'),
],
),
),
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: 'Quizzes\n',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold)),
TextSpan(text: 'Free quizzes.'),
],
),
),
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: 'No Ads\n',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold)),
TextSpan(text: 'All annoying ads gone.'),
],
),
),
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: '10 Flashcards\n',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold)),
TextSpan(text: 'Create your own 10 flashcards.'),
],
),
),
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: 'Textbooks\n',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold)),
TextSpan(text: 'Download all textbooks in PDF.'),
],
),
),
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: 'State Trial Papers\n',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold)),
TextSpan(text: 'Download all trial papers in PDF.'),
],
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.done_rounded,
color: Colors.green,
size: 24.0,
),
Icon(
Icons.done_rounded,
color: Colors.green,
size: 24.0,
),
Icon(
Icons.done_rounded,
color: Colors.green,
size: 24.0,
),
Icon(
Icons.done_rounded,
color: Colors.green,
size: 24.0,
),
Icon(
Icons.close,
color: Colors.red,
size: 24.0,
),
Icon(
Icons.close,
color: Colors.red,
size: 24.0,
),
],
),
]),
Solution 1
I would first try to put the rich text widget and the corresponding icon in one Row centering elements vertically, instead of two separate columns which makes it a little more complicated. Like this (just 1 a row example):
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: 'Revision notes\n',
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
TextSpan(text: 'Free notes.'),
],
),
),
const Icon(
Icons.done_rounded,
color: Colors.green,
size: 24.0,
),
],
),
],
)
The mainAxisAlignment attribute will align your elements pushing them one to the left and one to the right of the screen.
The crossAxisAlignment attribute will align the element by centering them vertically.
Solution 2
If you still need two columns, then you can read the heights of the single rows on the left with LayoutBuilder and use that size for the height of the icon.
Another way is giving all rows fixed height since you always have title and subtitle of the same sizes (better test smaller screens for this one), so you work around the problem entirely. I would leave this one as last solution.
Use a Row and put a Space between them (i used a Spacer here, you can use a SizedBox or something like that):
Row(
children: [
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(
text: 'Revision notes\n',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold)),
TextSpan(text: 'Free notes.'),
],
),
),
Spacer(),
Icon(
Icons.close,
color: Colors.red,
size: 24.0,
),
],
),
I recommend that you make a widget for create each line, so your code will be more readable. Look my example:
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
backgroundColor: Colors.amber,
body: SizedBox(
width: 300,
child: ListView(
children: const [
CustomListTile(
title: 'Revision notes',
subtitle: 'Free notes',
trailing: Icon( Icons.check, color: Colors.greenAccent, )),
CustomListTile(
title: 'Quizzes',
subtitle: 'Free quizzes',
trailing: Icon( Icons.check, color: Colors.greenAccent, )),
CustomListTile(
title: 'No Ads',
subtitle: 'All ... ',
trailing: Icon( Icons.check, color: Colors.greenAccent, )),
CustomListTile(
title: 'Flashcards',
subtitle: 'Create your own...',
trailing: Icon( Icons.close, color: Colors.redAccent, )),
CustomListTile(
title: 'Textbooks',
subtitle: 'Download all ...',
trailing: Icon( Icons.close, color: Colors.redAccent, )),
],
),
),
),
);
}
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
class CustomListTile extends StatelessWidget {
const CustomListTile({
super.key,
required this.title,
required this.subtitle,
required this.trailing
});
final String title;
final String subtitle;
final Icon trailing;
#override
Widget build(BuildContext context) {
return ListTile(
title: Text( title, style: const TextStyle( fontSize: 20 ), ),
subtitle: Text( subtitle, style: const TextStyle( fontSize: 14 ), ),
trailing: trailing,
);
}
}
This was my output:
I want make this
Wrap(
textDirection: TextDirection.rtl,
children: [
Text(
_items[1]['text'],
softWrap: true,
textAlign: TextAlign.justify,
textDirection: TextDirection.rtl,
style: GoogleFonts.notoNaskhArabic(
fontWeight: FontWeight.w900,
fontSize: 25,
backgroundColor: Colors.red),
),
Text(
_items[1]['text'],
softWrap: true,
textAlign: TextAlign.justify,
textDirection: TextDirection.rtl,
style: GoogleFonts.notoNaskhArabic(
fontWeight: FontWeight.w900,
fontSize: 25,
backgroundColor: Colors.red
),
),
],
)
I wanted to wrap Text and image like photo, but the code turns out to be like this
This wrong
Use RichText with WidgetSpan for non text.
RichText(
text: TextSpan(
children: [
TextSpan(text: "A"),
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Icon(Icons.av_timer),
),
TextSpan(text: "B"),
],
),
),
More about RichText
I am trying to make space between TextSpan
What is the best way to add space between TextSpan?
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Don\'t have an Account?',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w400,
),
),
TextSpan(
text: 'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
SizedBox widget can be used in between two widgets to add space between two widgets.
use the SizedBox by wrapping it with a WidgetSpan widgit
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Don\'t have an Account?',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w400,
),
),
WidgetSpan(
child: SizedBox(width: 10),
),
TextSpan(
text: 'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
If you like to get maximum space between text, you might go for Row widget. For x amount of space inside RichText you can use
TextSpan(...),
WidgetSpan(child: SizedBox(width: x)),
TextSpan(...),
RichText(
text: const TextSpan(
children: [
TextSpan(
text: 'Don\'t have an Account?',
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 15.0,
fontWeight: FontWeight.w400,
),
),
WidgetSpan(child: SizedBox(width: 10)), ///this
TextSpan(
text: 'Sign Up',
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
You can use the height property on the TextStyle to create some spacing:
RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Don\'t have an Account?',
style: TextStyle(
height: 1.5, //USE THIS PROPERTY
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w400,
),
),
SizedBox(height: 10),
TextSpan(
text: 'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
More info in the docs: https://api.flutter.dev/flutter/painting/TextStyle/height.html
I want to set a black heart between "m" and "ms". and also I want to use "TextAlign.justify". if I use "TextAlign.center" then it's working fine. but if I use "TextAlign.justify" so the black heart is not set in the correct place. If I remove the "WidgetSpan" widget and add "TextSpan" for a black heart so also it's working. but I want to add bottom padding.
Please guys help me.
Thanks
Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(
text: MyString.txtAboutUs ,
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_regular)),
TextSpan(
text: " m",
children: <InlineSpan>[
WidgetSpan(
baseline: TextBaseline.ideographic,
alignment: PlaceholderAlignment.top,
child: Container(
padding: EdgeInsets.only(bottom: 3),
child: Text("🖤", style: TextStyle(
fontSize: FontSize.size8,
fontFamily: MyFont.poppins_regular) ),
)
),
TextSpan(
text: "ms ",
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_medium,
color: Colors.black,
fontWeight: FontWeight.bold)),
],
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_medium,
color: Colors.black,
fontWeight: FontWeight.bold)),
TextSpan(
text: MyString.txtAboutImmediately,
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_regular)),
],
),
textAlign: TextAlign.justify,
),
Try to below simple Text Widget
Text('you add 🖤 here'),
// OR
Text('you add \u{2764} here} '),
Updated Answer using RichText
Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'You add ',
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
),
TextSpan(
text: '🖤',
),
TextSpan(
text: 'Here',
),
],
),
textAlign: TextAlign.center,
style: TextStyle(fontSize: 10.0,),
),
),
Screen like
replace padding with transform.
WidgetSpan(
baseline: TextBaseline.ideographic,
alignment: PlaceholderAlignment.top,
child: Container(
transform: Matrix4.translationValues(0, -3, 0),
margin: EdgeInsets.only(bottom: 8),
child: Text(
"🖤",
style: TextStyle(
// fontSize: FontSize.size8,
// fontFamily: MyFont.poppins_regular,
),
),
),
),
I have the next widget:
class PoinstsDisplayState extends State<PoinstsDisplay> {
#override
Widget build(BuildContext context) {
return new Container(
width: MediaQuery.of(context).size.width*0.9,
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Color(0xff2b2b2b),
borderRadius: BorderRadius.circular(10.0),
),
child: new Text(
'5000 Pts',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Karla'
),
)
);
}
}
That looks like this:
That have the perfect position, now I want to style the number 5000 and the 'Pts' text separately but I have not managed to make it work (center two text like the image), I am try with a Row, more Containers, the Center Class etc, etc.
This is a perfect use of the rich text constructor with a couple of TextSpans.
Taking from the 2nd sample in the flutter docs, try:
Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(text: '5000 ', style: TextStyle(color: Colors.white)),
TextSpan(text: 'pts', style: TextStyle(color: Colors.red)),
],
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Karla'
),
)
You probably want to use some combination of mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, and placing some padding or an empty Container with a set width between the two text widgets for the space.
class PointsDisplay extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'5000',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
fontFamily: 'Karla'
),
),
Container(width: 5.0,height: 0,),
Text(
'Pts',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Times'
),
),
],
);
}
}
When you have a WidgetSpan as a children of TextSpan, you can use:
WidgetSpan(
child: Icon(Icons.access_time),
alignment: PlaceholderAlignment.middle
)
Use RichText: Video | Document
RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Hello ',
children: const <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' world!'),
],
),
)