I have the following code:
AutoSizeText.rich(
TextSpan(children: [
const TextSpan(
text: "\$",
style: TextStyle(
color: Colors.white,
fontSize: 45,
height: 1.0,
letterSpacing: .0,
fontWeight: FontWeight.w600,
),
),
TextSpan(
text: widget.budget.truncate().toString(),
style: const TextStyle(
color: Colors.white,
fontSize: 90,
),
),
TextSpan(
text: ".${widget.budget.toStringAsFixed(2).split(".")[1]}",
style: const TextStyle(
color: Colors.white,
fontSize: 45,
),
),
]),
style: GoogleFonts.manrope(
fontSize: 45,
letterSpacing: -4.5,
height: 1.0,
fontWeight: FontWeight.w600,
textStyle: const TextStyle(
leadingDistribution: TextLeadingDistribution.even,
)),
textAlign: TextAlign.center,
maxLines: 1,
);
The code results in this (I also tried with Text.rich instead of AutoSizeText but the result is the same):
In the image, I have wrapped the text in a red container to check its bounding box.
I am implementing this element following a design I made in Figma:
Similatly, in this image the red frame has an autolayout applied with all padding set to 0, in a way that simulates wrapping the text in a Container.
The text looks the same in both the design and the Flutter implementation, but the Flutter one is shifted upwards, which on big text sizes is really noticeable. I figured it might have something to do with the vertical alignment of the text but I could not find any way to fix it.
Is this an expected behaviour or am I doing something wrong?
Related
The first word is underlined but if you look closely, the text overlaps a part of the colored shape/part. It is not just under the text.
Here is what I am trying to achieve:
Here's my current code:
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Welcome",
style: TextStyle(
color: HSColors.darkBlue,
decoration: TextDecoration.underline,
decorationColor: HSColors.cream,
decorationThickness: 5.h,
fontSize: 30.sp,
fontWeight: FontWeight.w700,
height: 1.1,
letterSpacing: -0.03),
),
TextSpan(
text: " to Veritas Monitoring Services",
style: TextStyle(
color: HSColors.darkBlue,
fontSize: 30.sp,
fontWeight: FontWeight.w700,
height: 1.1,
letterSpacing: -0.03),
)
]),
),
Here is what it currently looks like:
Moreover, if I use other text, it overlaps and looks like this:
You need to work with decorationThickness value.
decorationThickness: 5.h,
I have lower the decorationThickness value to
decorationThickness: 0.2.h,
Here's the result on iPhone 12 simulator
You can acheive this using Stack as shown below. Set the behind container's height and width as per your need. Thanks
Stack(
alignment: Alignment.bottomLeft,
children: [
Container(
height: 15,
width: 130,
color: Colors.amber,
),
Text("Welcome",
style: TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.w700,
height: 1.1,
letterSpacing: -0.03),
),
],
),
I am trying to add a text field inside the paragraph in flutter but not getting success below screen shot what I want to achive.
I am trying the below code
RichText(
text: TextSpan(
text: "“",
style: TextStyle(
color:
const Color(0xff56A1D5),
fontSize: 20.sp),
children: <InlineSpan>[
WidgetSpan(
child: Text(
"I want to talk with you about ",
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(
0xff506274),
fontSize: 20.sp),
),
),
const WidgetSpan(
child: SizedBox(
width: 120,
child: TextField(
decoration:
InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.all(0),
),
),
),
),
WidgetSpan(
child: Text(
"(the actions, attitude, or behavior)",
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(
0xff506274),
fontSize: 20.sp),
),
),
],
),
),
But My output is look like below.
Can anyone show me where I am going to wrong or How can I achieve the same as the above image without leaving extra space?
Thanks in advance.
Your code is perfectly right. as (the actions, attitude, or behavior) this text does not fit in the screen it came into a new line. For checking this reduce your text then you may understand the issue.
Your code output when I run your code:
Desktop:
Mobile:
So if I want to seperate two texts I would use padding, but how do I bring them so close to each other? I don't want any Space between the bottom of the "Test" and the top of the "Admin".
There is no sizedboxes or padding in between them.
Code:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: Sizes.appropriateWidth(55),
backgroundImage:
NetworkImage("https://via.placeholder.com/140x100"),
),
SizedBox(
height: Sizes.appropriateHeight(9),
),
Text(
"Test",
style: TextStyle(
fontFamily: 'SF Pro Display Bold',
fontSize: Sizes.appropriateWidth(37),
color: Color(0xFF000000),
),
),
Text(
"Admin",
style: TextStyle(
fontFamily: 'SF Pro Display Regular',
fontSize: Sizes.appropriateWidth(62),
color: Color(0xFF8D99AE),
),
),
],
),
How do I do this in flutter? Thank you!
UPDATE
You could also use the TextStyle.height parameter to achieve the same effect, Like this,
Text(
"Admin",
style: TextStyle(
fontFamily: 'SF Pro Display Regular',
fontSize: 62,
height: 0.7,
color: Color(0xFF8D99AE),
),
),
OR
Transform.translate widget to the rescue.
The Transform widget allows you to perform any kind of transformations while painting your child.
Transform.translate is the named constructor for performing a translation by an Offset. Just wrap your child and give it an Offset to get it working.
You can use it like this,
Transform.translate(
offset: Offset.fromDirection(-pi / 2, 20),
child: Text(
"Admin",
style: TextStyle(
fontFamily: 'SF Pro Display Regular',
fontSize: 62,
color: Color(0xFF8D99AE),
),
),
),
In offset: Offset.fromDirection(-pi / 2, 20), -pi / 2 means towards the top and 20 is the distance to move.
Play with the distance and see what works for you.
There is no padding from flutter itself, the padding come from the typo, imagine you have something like ÓÛÌmAm, you will need extra space for those ` ^ ' on uppercase letters. You cannot get rid off this space. For solutions you can look at Nisanth Reddy answer.
Sometimes, the text widget does a line break, and sometimes don't. I tried to add overflow and maxline but it doesn't work.
This is the code:
Text(
ArticleData().articleBank[index].articleTitle,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.black,
),
),
This is what, I will try to build:
You can use FittedBox class.
Scales and positions its child within itself according to fit. The fit and alignment arguments must not be null.
FittedBox(
Key key,
fit: BoxFit.none,
alignment: Alignment.center,
child: Text(
ArticleData().articleBank[index].articleTitle,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.black,
),
),
)
I have an Arabic text in a pdf file. When I copy the text into Text Widget it becomes weird characters. When I checked the pdf file properties I found that it uses HQPB1, HQPB2, HQPB3, HQPB4 fonts, so I imported all of these fonts to my pubsec.yaml file. The problem is that I can use only one of these 4 fonts at a time but the pdf file uses all of these 4 fonts simultaneously.
this is the original text from pdf
when I added HQPB1.ttf only
when I added HQPB2.ttf only
So I want to include all of these 4 fonts in a Text so that each individual font should be used when it is needed as pdf does.
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Hello ', style: TextStyle(fontFamily: "Serif", fontSize: 30, color: Colors.black)),
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue, fontSize: 30)),
TextSpan(text: ' world!', style: TextStyle(fontFamily: "Roboto", fontSize: 30, color: Colors.red)),
],
),
)
Output:
In order to have multiple styles on one Text widget you have to use RichText. RichText has a children[] so you can have custom TextStyle (which will use whatever font you want) for each TextSpan
Check it out here -> https://api.flutter.dev/flutter/widgets/RichText-class.html
const Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Hello ',
style: TextStyle(
fontFamily: "Serif",
fontSize: 30,
color: Colors.black,
),
),
TextSpan(
text: 'bold',
style: TextStyle(
fontFamily: "Arial",
fontWeight: FontWeight.bold,
color: Colors.blue,
fontSize: 30,
),
),
TextSpan(
text: ' world!',
style: TextStyle(
fontFamily: "Roboto",
fontSize: 30,
color: Colors.red,
),
),
],
),
)