Let me provide an image:
I have a rectangle. I put here two elements, O1 and TEXT (with TextAlign.center).
For now I'm using stack, so in rectangle I have:
text in container, expanded on whole width with TextAlign.Center
Small rectangle on right (O1) on screen. (positioned widget with left: 0)
All works fine but, in some cases, If text is long, text overlap O1 - it's a problem.
How to assure a minimum left starting position for text which will work on long text (text which want to overlap O1)? i.e if text want to overlap O1, then move text to right. (O1 width = 16)
What I tried?
Add left margin / padding to container of text.
It works fine for long text which wants to overlap O1. But It does not work properly on smaller text. Because TextAlign.center applies after text to right. So this text does not looks center in the biggest rectangle, only in the smaller.
You can use the overflow in Text Widget.
new Text(
'Text largeeeeeeeeeeeeeeeeeeeeeee',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
Just try the methods here to see which one fits best for you. This should work if text trys to overflow over its container (into O1) it will not.
Related
I'm trying to make a TextField that has the following feature:
The text inside such TextField can have its characters' width automatically reduced (but those characters' height is not affected) when the typed text reaches the right side of the TextField (given textAlign is TextAlign.left). If we keep typing, the width will just become smaller and smaller but the whole text will still be visible.
Below is an illustration of what I'm trying to accomplish.
How can I do that? Any help is appreciated.
You can use auto_size_text_field package, like this:
AutoSizeTextField(
controller: _controller,
minFontSize: 26,
style: TextStyle(fontSize: 60),
textAlign: TextAlign.left,
fullwidth: false,
)
I want to create a Text widget with exactly two lines of text even if text's length is too small or too large.
I can limit upper-bound of line count with maxLines like below:
Text(subtitle,
maxLines: 2,
style: Theme.of(context).textTheme.bodyText1?.copyWith(
color: Theme.of(context).colorScheme.onSurface,
fontWeight: FontWeight.w400,
)
)
I saw some answers where it is suggested to use a SizedBox to fix the height of content. I didn't feel right to hardcode this value.
I am looking for something like lines in Android's TextView. What else can I do to achieve this in Flutter?
Update:
From the help of comments & answers below, I am using following code now:
String withExtraNextLineCharacters(String text, int count) {
String nextLineCharacters = "";
for (int index = 0; index < (count - 1); index++) {
nextLineCharacters += "\n";
}
return text + nextLineCharacters;
}
Text(subtitle+'\n',
maxLines: 2,
style: Theme.of(context).textTheme.bodyText1?.copyWith(
color: Theme.of(context).colorScheme.onSurface,
fontWeight: FontWeight.w400,
)
)
the line break \n is a placeholder for 2 lines. The subtitle shift them down... and the maxLines condition is cutting them away :-)
I have a widget containing two (text) items, one of which has variable length. I want the second item to wrap to the end of the next line if space runs out.
Flutter has a widget named Wrap which allows for wrapping content if space runs out, however I have not been able to get the desired result using all kinds of combinations of Wrap, Expanded, Row and Spacer widgets. The closest I got was the second element wrapping to the start of the second row, but I want it to go to the end of the second row.
I am fairly new to Flutter but have found ways to do it in CSS by placing the variable width element in a container and applying flex: 1 0 auto to the container and flex-wrap: wrap and flex-justify: flex-end to the flexbox containing both elements.
I tried putting the first element in an Expanded, but apparently putting an Expanded directly inside a Wrap is not allowed so that gave me errors and no results.
Put the two sentences into a list like so:
List<TextSpan> reasonList = [TextSpan(text: 'sentence1'), TextSpan(text: 'sentence2') ];
Then:
Container(
child: RichText(
text: TextSpan(
children: reasonList,
style: TextStyle(
color: Colors.black, fontSize: 16)),
),
);
This not only wraps but gives you more control over every sentence, like gesture detection and color changing.
In flutter, how can I resize text in an app based on device screen size? The app is used for reading text, I need users to see bigger text as their device size increases and also set a maximum possible size. One way I know is doing this;
Text(
'Some text here',
style: TextStyle(
fontSize: 20 * MediaQuery.of(context).size.width * some_ratio
),
)
Is there a different way of doing this that will also take into consideration display height as well?
For font size based on screen, I would suggest using Height as reference.
for example:
double unitHeightValue = MediaQuery.of(context).size.height * 0.01;
double multiplier = 25;
return Text(
'Some Text',
style: TextStyle(
fontSize: multiplier * unitHeightValue,
),
);
By this approach, you will get Pixel perfect Text size with an additional advantage of a multiplier value of your choice.
This is similar to the dp or sp concept in Android.
Update:
After a few additional experiences, I have realised that choosing Height as references only works for mobile devices, especially in portrait mode/orientation.
In simple terms when device's main scrolling axis is vertical in device's portrait mode.
So, I would suggest selecting/changing the references as per the need of your application.
i.e. If you are working on an application which is definitely mobile app with only portrait orientation & no rotation support, the above code should work fine without any issues.
However, in case of flutter web support or just rotation support in mobile app, the above approach may not give desired results when user rotates the device.
In this scenario referring to the screen width makes sense for flutter web due to web being accessible to horizontal displays.
But in case of rotation support you may choose to stick with width as reference in all orientation or update the reference based on orientation.
This should be the best answer so far:
final textScale=MediaQuery.of(context).size.height * 0.01;
final screenHeight=MediaQuery.of(context).size.height;
double getHeight(double sysVar,double size){
double calc=size/1000;
return sysVar *calc;
}
double getTextSize(double sysVar,double size){
double calc=size/10;
return sysVar *calc;
}
Text('lovely family',style: TextStyle(fontSize: getTextSize(textScale,
20),),
SizedBox(height: getHeight(screenHeight, 30),),)
Not a direct answer, but the solution for me was different. Depends on what you would like to achieve. For me, the auto_size_text widget solved most of the problems, because row and other widgets define basic size.
AutoSizeText(
'Text will be resized',
style: TextStyle(fontSize: 20), //just info size
maxLines: 2, //if needed
)
So in Material Design Spec under Onboarding: here
It is specified that:
32sp line height
which is the height from the bottom of the headline text to the base line of the subhead text.
My question is how exactly can this be implemented in flutter. Are padding enough to mimic this spec? or are there other more accurate ways to do this?
Yes, there is also a height property in TextStyle which allows you to manually adjust the height of the line.
Code Snippet
Text('Hey There',
style: TextStyle(height: 5, fontSize: 10),
)
In addition to Ayush's answer. If we look to the documentation, we can see
When height is non-null, the line height of the span of text will be a multiple of fontSize and be exactly fontSize * height logical pixels tall.
For example, if want to have height 24.0, with font-size 20.0, we should have height property 1.2
Example:
TextStyle(
fontSize: 20.0,
height: 1.2,
);