Does anyone know how I can get this half-bolded effect using Flutter?
You can use RichText widget like below.
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: [
TextSpan(text: "Are you sure you want to delete ", style: black16w700),
TextSpan(text: "Broker Account?", style: black16w500)
]))
var text = RichText(
text: TextSpan(
style: const TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
TextSpan(text: 'NonBOld'),
TextSpan(text: 'Bold', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
);
Try TextSpan widget having children.
use the richtext widget property as follows
Text.rich(
TextSpan(
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 52,
color: const Color(0xff7a7a7a),
),
children: [
TextSpan(
text: 'arch',
style: TextStyle(
fontWeight: FontWeight.w700,
),
),
TextSpan(
text: 'Incubator',
),
],
),
)
You should use RichText
RichText(
text: TextSpan(
text: 'Hello ',
style: // style text,
children: const <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' world!'),
],
),
)
Read this doc and check this answer
Related
The error which I'm getting is :
" The argument type 'TextSpan' can't be assigned to the parameter type 'List? "
Here is the code:
Widget buildSignUpBtn() {
return GestureDetector(
onTap: () => print('SignUp Pressed'),
child: RichText(
text: TextSpan(
children: TextSpan(
text: 'Don\'t have an Account',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.w500,
),
),
TextSpan(
text: 'Don\'t have an Account',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.w500,
),
),
),
),
);
}
Please help me to fix this!
it is taking list of TextSpan in the children property just like this:
RichText(
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' world!'),
],
),
)
you can read more about RichText in the official documentation here
I'm creating a text-style model and using getter to have the text-Style that use google_fonts. The issue occurs when I provide fontWeight: property. Also, the fontWeight is not providing similar look as GoogleFont.
I've tested on another project, rebuilding the project, using html renderer. I've checked this question but it is not working.
Comparison between styles
But Looks from GoogleFont
flutter doctor -v no issue
Flutter (Channel stable, 2.5.2, on Microsoft Windows [Version
10.0.19043.1288], locale en-US)
• Flutter version 2.5.2 at C:\Tools\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 3595343e20 (3 weeks ago), 2021-09-30 12:58:18
-0700
• Engine revision 6ac856380f
• Dart version 2.14.3
Model class
class AppTextStyles {
static TextStyle get normalMidBlod => const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 33,
);
static TextStyle get latoMidBlod => GoogleFonts.lato(
fontWeight: FontWeight.bold, //this one
color: Colors.black,
fontSize: 33,
);
static TextStyle get lato => GoogleFonts.lato(
color: Colors.black,
fontSize: 33,
);
}
Test Widget
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: const [
Text("style: TextStyle.."),
Text(
"w100",
style: TextStyle(fontWeight: FontWeight.w100, fontSize: 33),
),
Text(
"w200",
style: TextStyle(fontWeight: FontWeight.w200, fontSize: 33),
),
Text(
"w300",
style: TextStyle(fontWeight: FontWeight.w300, fontSize: 33),
),
Text(
"w400",
style: TextStyle(fontWeight: FontWeight.w400, fontSize: 33),
),
Text(
" w500",
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 33),
),
Text(
" w600",
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 33),
),
Text(
" w700",
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 33),
),
Text(
" w800",
style: TextStyle(fontWeight: FontWeight.w800, fontSize: 33),
),
Text(
" w900",
style: TextStyle(fontWeight: FontWeight.w900, fontSize: 33),
),
],
),
const SizedBox(
width: 30,
),
Column(
children: [
Text("normalMidBlod.copyWith"),
Text(
"w100",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w100),
),
Text(
"w200",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w200),
),
Text(
"w300",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w300),
),
Text(
"w400",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w400),
),
Text(
" w500",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w500),
),
Text(
" w600",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w600),
),
Text(
" w700",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w700),
),
Text(
" w800",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w800),
),
Text(
" w900",
style: AppTextStyles.normalMidBlod
.copyWith(fontWeight: FontWeight.w900),
),
],
),
const SizedBox(
width: 30,
),
RichText(
text: TextSpan(
children: [
TextSpan(text: "latoBold.copyWith \n"),
TextSpan(
text: "w100 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w100),
),
TextSpan(
text: "w200 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w200),
),
TextSpan(
text: "w300 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w300),
),
TextSpan(
text: "w400 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w400),
),
TextSpan(
text: " w500 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w500),
),
TextSpan(
text: " w600 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w600),
),
TextSpan(
text: " w700 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w700),
),
TextSpan(
text: " w800 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w800),
),
TextSpan(
text: " w900 \n",
style: AppTextStyles.latoMidBlod
.copyWith(fontWeight: FontWeight.w900),
),
],
),
),
const SizedBox(
width: 30,
),
RichText(
text: TextSpan(
children: [
TextSpan(text: "lato.copyWith \n"),
TextSpan(
text: "w100 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w100),
),
TextSpan(
text: "w200 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w200),
),
TextSpan(
text: "w300 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w300),
),
TextSpan(
text: "w400 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w400),
),
TextSpan(
text: " w500 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w500),
),
TextSpan(
text: " w600 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w600),
),
TextSpan(
text: " w700 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w700),
),
TextSpan(
text: " w800 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w800),
),
TextSpan(
text: " w900 \n",
style:
AppTextStyles.lato.copyWith(fontWeight: FontWeight.w900),
),
],
),
)
],
),
);
}
}
Only certain fonts support one ttf file with different weights. If you notice the alphabet g it looks different in each weight. You may have to download the full font family from Google fonts and include that in your pubspec.yaml under assets. It should work.
Check https://pub.dev/packages/google_fonts bundling font in application assets section.
There is a bug on the google_fonts_flutter package repo that talks about this: https://github.com/material-foundation/google-fonts-flutter/issues/141
To summarize, when you create a Google Font TextStyle, the fontFamily is set to the original weight you specified (ex. 'poppins-w400') instead of the general fontFamily name ('poppins').
You can fix this by specifying the fontFamily in your copyWith method.
TextSpan(
text: " w900 \n",
style: AppTextStyles.latoMidBlod
.copyWith(
fontWeight: FontWeight.w900,
fontFamily: GoogleFonts.poppins().fontFamily,
),
),
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,
),
),
),
),
Im trying getting some space in Richttext. First heres my code
title: RichText(
text: TextSpan(
text: _snapshot.data['username'], // _snapshot.data['username']
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
children: <TextSpan>[
TextSpan(
//"${comment.data()['comment']}"
text: "${comment.data()['comment']}",
style: TextStyle(
fontWeight: FontWeight.normal,
),
)
],
),
)
And what I want is some space between the this
text: TextSpan(
text: _snapshot.data['username'], // _snapshot.data['username']
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)
And this
children: <TextSpan>[
TextSpan(
//"${comment.data()['comment']}"
text: "${comment.data()['comment']}",
style: TextStyle(
fontWeight: FontWeight.normal,
),
],
),
Hope anyone can help. If you need a picture how it looks at the moment please leave a comment
You can use a SizedBox like below :
RichText(
text: TextSpan(
text: "Test:",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
children: <InlineSpan>[
WidgetSpan(
alignment: PlaceholderAlignment.baseline,
baseline: TextBaseline.alphabetic,
child: SizedBox(width: 10)),
TextSpan(
text: "Data",
style: TextStyle(
fontWeight: FontWeight.normal,
),
)
],
),
)
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,
),
)