I am having problems with my app.. When i set the fontSize on my phone it works OK but on other peoples phones due to there phone fontSize settings it is affecting the size of the text in my app.. I heard text scale factor can help but i do not know how to use it
You can use MediaQuery.of(context).textScaleFactor but I think using auto_size_text is more efficient.
EDIT 2 :
Widget build(BuildContext context){
return Text(
'Hello, How are you?',
textScaleFactor : MediaQuery.of(context).textScaleFactor,
style: TextStyle(fontWeight: FontWeight.bold,fontSize : 18),
);
}
And you can check the usage of this property from here as well as TextStyle class from here.
Related
I am trying to cycle through an array of texts based on ListWheelScrollView using onSelectedItemChanged, but the text does not update, however the variable change does appear in the console
I am extending StatefulWidget too
Here is my ListWheelScrollView:
ListWheelScrollView(
onSelectedItemChanged: (i) {
setState(() {
prompt = promptList[i];
devtools.log(prompt);
});
},
...
and my Text widget looks like this:
Text("$prompt",
key: const Key("textKey"),
style: const TextStyle(
color: Color.fromARGB(255, 255, 255, 250))),
),
I defined my variable prompt inside my build widget instead of the class itself, I'll leave this in case someone else makes the same mistake
See here for Apple's Dynamic Type sizes.
I want to use dynamic font sizing, to make text in my app scale according to accessibility settings. However, the default pt sizes don't cover what I require.
Eg.:
Title 1 — 28pt
Title 2 — 22pt
I want to be able to use a 24pt font, with dynamic sizing. With the Large (default) setting, this is not possible... but if the user has the xLarge setting, Title 2 actually scales to 24pt...
As I am targeting iOS 15, I am using these modifiers on my Text so I can use a rounded font with dynamic sizing:
.font(.system(.title2, design: .rounded))
.fontWeight(.regular)
I've searched and searched, but none of the suggested answers work for me. I like the idea of being able to scale the existing dynamic type sizes by a multiplier but if I use .scaleEffect(value) it created pixellation when scaling up, and messes with padding even when scaling down.
You can create a font with a custom point size that scales with other dynamic fonts using:
Font.custom(_:size:relativeTo:)
e.g.
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Title").font(.title).border(.green)
Text("Title").font(.title1½).border(.blue)
Text("Title").font(.title2).border(.red)
}
}
}
extension Font {
static let title1½ = Font.custom("", size: 24, relativeTo: .title2)
}
(leaving the name blank seems to return the system font)
You can adapt this to use rounded fonts in iOS 15. First you'll need to find the name of the font itself, using UIKit:
let font = UIFont.systemFont(ofSize: 24, weight: .regular)
let fontDescriptor = font.fontDescriptor.withDesign(.rounded)!
let roundedFont = UIFont(descriptor: fontDescriptor, size: 24)
print(roundedFont.fontName)
// .AppleSystemUIFontRounded-Regular
You can use this in your custom Font method:
extension Font {
static let title1Rounded = Font.custom(".AppleSystemUIFontRounded-Regular", size: 28, relativeTo: .title)
static let title1½Rounded = Font.custom(".AppleSystemUIFontRounded-Regular", size: 24, relativeTo: .title2)
static let title2Rounded = Font.custom(".AppleSystemUIFontRounded-Regular", size: 22, relativeTo: .title2)
}
My question is essentially the same as How to remove Space at the bottom of TextField in flutter?, except instead of a TextFormField widget, I am asking the same for a SpinBox widget. Setting isDense: true or isCollapsed: true seems to move the number out of line with the increment/decrement buttons (see screenshots)
Meanwhile, wrapping in a SizedBox and setting height is some improvement, but I am not able to shrink height as much as I would like, or increment/decrement go below the line.
This is with a height of 25:
Having a height of 45 looks visually fine but it takes up too much space for my needs.
Current code which produces the layout below:
SizedBox(
width: 120,
height: 45,
child: SpinBox(
value: 0,
onChanged: (value) {}
),
)
Looking at the source code of the SpinBox you can see that you have the inputDecoration of the TextField exposed, and you can try removing the contentPadding of it and see if it fixes your issue :
SpinBox(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
),
);
I am updating button text based on values in a database and as these values may be very long or very short, I want the button size to remain constant and the text to resize dynamically depending on how big the value is, so it remains within the button and not truncated (The values will be sentences, it is a language learning app). I basically want to give the font size a minimum possible value and a maximum possible value.
I know how to do this in Android Studio.
autoSizeMinTextSize=14sp
autoSizeMaxTestSize=20sp
But when I tried to use suggestions like a large font size with minimumScaleFactor, it doesn't work. It just makes the text incredibly small.
Here is my button style.
struct SoundButton: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.foregroundColor(Color.black)
.multilineTextAlignment(.center)
.font(.custom("arial", size: 20))
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(configuration.isPressed ? LinearGradient(gradient: Gradient(colors: [Color("DarkestGreen"), Color("LightGreen")]), startPoint: .top, endPoint: .bottom):LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .top, endPoint: .bottom))
.cornerRadius(10)
.shadow(radius: 3.0)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.white, lineWidth:2))
.padding(2)
.scaleEffect(configuration.isPressed ? 0.975 : 1.0)
}
}
And here is the button code.
Button(action: {
playSound(sound: "\(self.category)_audio1", type: "mp3")
self.translation = self.btns[1][1]
}) {
if(gotValues==true) {
Text("\(self.btns[1][0])")
} else {
Text("\(self.btn1)")
}
}
Here is what my screen looks like in the app.
What can I add to this to achieve the desired effect? Thank you.
Also, here is the working android version.
As far as I understood your goal the following should give you required effect (or sort of)...
Tested with Xcode 11.4 / iOS 13.4
configuration.label
.padding(.horizontal, 8).lineLimit(1).minimumScaleFactor(0.4) // << this place !
.foregroundColor(Color.white)
I am implementing a simple widget but I am a primer with animations :)
How can I avoid the second "screen" to occupy space while transitioning in?
Here my fiddle: https://codesandbox.io/s/7w4yw5yq4q
As you can see when you click a button on the first "screen" both the first "screen" and the second are in the DOM so the widget doubles its height.
I want that the two occupy the same line so the height of the widget stays the same.
I guess that I need to use absolute positioning but I want to be sure that it is the right way to do this and see an example of the implementation.
Maybe is there a way to do it without losing the height of the parent (that when the children are absolute positioned goes to 0)
Likely a bit late to answer this but may be others looking for the same answer may benefit.
Is this what you were asking to do?
One thing in Mithril is that if you don't want to return an element, you can just return a null. I use that technique a lot like showHeading ? m("h1", "Heading!") : null
The following is the mod of your code and its fiddle to demonstrate. There are other ways of doing it like dynamically changing the class depending on the toggle.
var m = require("mithril");
import "./style.css";
let app = function() {
let toggle = false;
return {
view: vnode => {
return m(".steps", [
m("button", { onclick: () => (toggle = !toggle) }, "toggle"),
m(
".step",
toggle
? null
: [m("h1", "Title 1"), m("p", "jfewlkfjewklfjwelkfjklewjfw")]
),
toggle
? m(".step.slide-in", [
m("h1", "Title 2"),
m("p", "jfewlkfjewklfjwelkfjklewjfw")
])
: "",
m(".step", [m("h1", "Title 3 "), m("p", "jfewlkfjewklfjwelkfjklewjfw")])
]);
}
};
};
m.mount(document.getElementById("app"), app);