I want to reduce the area below the baseline of certain text in my Flutter app. The space below can be seen here:
Space below baseline
The text will always be numbers so it will never extend below the baseline. Here is an example of that for reference:
Letters that extend below baseline
Is there a way to take up this space so the Divider at the bottom is closer to the bottom of the numbers?
I have tried StrutStyle widget but because I am using an AutoSizeText widget, this is a little hard to get working reliably.
Is my only option to find an uppercase-only font that has less space below the baseline? Or make a custom font myself (which I do know how to do, but is a pain)?
I faced your problem and came up with a solution.
You can use BaseLine widget. How to use
And put baseline = style.fontSize
Example code:
Baseline(
baseline: _style.fontSize,
baselineType: TextBaseline.alphabetic,
child: Text(
text,
style: _style,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
)
Before:
After:
But please notice every lower case like jgq. My solution is just for uppercase only.
Related
I am having a string that is to fetch from my API like this.
1)Open your browser.2) Go to settings.3) Click on developers mode.
So I am to display the string above in a text widget. But what I want is for it to break to the next line from where there is a full stop. So that in the text widget it will appear like this.
1) Open your browser.
2) Go to settings.
3) Click on developers mode.
Text(
'${fetched_string}',
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.bold),
)
How can I achieve that or Is there a better way to achieve that?
'${fetched_string}'.replaceAll(".", ".\n");
This should replace all fullstops with a full stop and a new line. Please note that it will replace all fullstops. So make sure you don't get fullstops in between sentenses
I'm pulling books from an online api, however this api returns it as a list of sentences.
I want to display these sentences in containers and make it look like a normal paragraph yet every sentence is clickable.
Expected result:
With each being a separate container in order to be clickable
Sentence number one. This is
sentence number two. And
this is sentence number three.
This sentence 4. This is
sentence number 5
I've tried to join the strings, and put them all in one Text widget, which looked like expected, but lost control over each sentence.
I've also tried to put each sentence in a Text widget, and wrap them with the Wrap() widget.
Wrap widget result
Sentence number 1. This is 2.
This is sentence number 3 and
it's long.
This is sentence number 4.
This is 5.
This is sentence number 6 and
its longer than all of them.
Its a step closer yet so far away, when the sentences are longer than the screens width it starts to look more like a listview, I'm trying to find a way to break these text widgets into two where it goes out of screen, instead of them taking 2 rows by default. I want to know if its possible, and if so how?
List<TextSpan> reasonList = [];
snapshot.data!.forEach((element) {
reasonList.add(TextSpan(text: '${element.sentence}'));
});
return Container(
child: RichText(
text: TextSpan(
children: reasonList,
style: TextStyle(
color: Colors.black, fontSize: 16)),
),
);
I'm using Semantics to adapt my app for accessibility and want to read a phone number (like: Text("950874123")) one to one instead "million, thousand...". Is there any way to do it?
I see this was asked a while back, but I ran into the same problem. I'm adding my solution here to help out the next guy.
I got the solution with the help of this page:
https://medium.com/theotherdev-s/mastering-flutter-semantics-672440bc8bc8
Basically, my solution is to use the Semantics label (that I can control) and use ExcludeSemantics to exclude the text that I'm reading. In the label, I divide everything up into an array that I convert into a string. This makes the screen reader see everything as individual numbers.
Here's an example
Semantics(
label: numberString.split("").toString(),
child: ExcludeSemantics(
excluding: true,
child: Text(numberString),
)
)
*Edit:
After playing around more with the code, I realized that the Text field has a property called "semanticsLabel" where you can do the same thing. I left the above example since it can be used for other widget types, not just Text()
This is what the code would look like:
Semantics(
child: Text(
viewModel.confirmationId,
semanticsLabel:numberString.split("").toString(),
)
)
(additionally, the parent 'Semantics' widget probably isn't needed. The label will work directly with the Text widget)
How can I shrink a TextFormField to fit only the text inside it and its associated prefix/suffix icons?
I'm trying to display a prefix (dollar) icon next to my number input. I want the field to align the the right of the screen. My TextFormField is inside a row:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('TITLE'),
Expanded(
TextFormField(
textAlign: TextAlign.end,
decoration: InputDecoration(
prefixText: '\$',
),
...
),
),
],
),
While this displays the numbers to the right, the TextFormField is expanding to fill all available space, and putting the prefix text on the left:
TITLE$_____________1000
I would like to add a spacer between the title and the form field, and let the form field occupy only the space needed to show its numbers:
TITLE<----spacer---->$1000
My attempts so far have only resulted in the spacer sharing spacing with the form field:
TITLE<--spacer-->$____1000
I want to style the prefix text differently than the field text, so I can't use an inputFormatter to add my prefix. There doesn't seem to be any way to tell the form field to draw the prefix text next to the field text. I suspect my issue with the prefix text is related to this bug: https://github.com/flutter/flutter/issues/18788
If there's a way to tell the form field to occupy the minimum amount of space needed, I can work around the prefix text bug.
I don't think you can shrink a TextFormField to fit only the text inside. Not easily anyway. I don't have the answer but maybe some pointers could also help ya.
First: you'd have to know what font you are using and calculate how long the text would be if you rendered it on the screen with the exact same font style as the input's. Once you have that, in theory, it should be possible to programmatically calculate the width of the input field.
Flutter uses RenderObject's to keep track of sizes. In fact, RenderBox is a child class of RenderObject. You can retrieve them by via GlobalKey.
If I remember correctly the API:
final gk = GlobalKey();
RenderBox box = gk.currentContext.findRenderObject();
Curious what solution you'll find. If you figure this out, please drop a response :)
I have an app that should comply with the design, but the problem I am facing is that the differences in resolutions make the content of the app look small compared to other apps. I have provided a screenshot of 2 different devices (Samsung Galaxy S10 5G and LG X500) and the original Sketch design to show what I am trying to make clear.
My designer is telling me to convert pt to dp to solve the current issue we are facing, but doesn't Flutter do that already? I found a source explaining about this yesterday: What is unit of measurement in flutter
I haven't tried anything else besides the regular implementation way in Flutter, so I am very much confused and stressed.
2 devices:
original sketch design:
Text:
Text( '\$',
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontFamily: 'poppins_light',
height: 0.7
),
),
Image.asset('assets/images/refresh.png', height:16.0, width: 16.0,),
I would like to know if there are more developers who face the same issue as I do right now and what kind of solutions there are to solve the current issue I am facing.
The fact is, DP to on screen size is not a constant ratio.
Flutter does use DP, but the specs of the unit makes that it can appear bigger/smaller on different screens.
For that reason you should just use the values provided by your designer and let it be.
Migrating OP's solution from the question to an answer:
I came with a better alternative to scale up text with the code below (insert inside the MaterialApp widget/root of the code):
builder: (context, child) {
return MediaQuery(
child: child,
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.20),
);
},