Menu
With MediaQuery I can get height and width of my Samsung S7 Edge screen size so I can work with it. But how to use MediaQuery to layout the multiple column dynamic text in ListTile? In my demo project I set the text size to 12 and in Samsung S6 I get overflow issues... Any info or example for text scale factor in Flutter?
I found one solution here (How can Flutter handle dpi text and image size differences) and I try to build demo project. S6 textScaleFactor is 1.1 an the S7 is 1.0....
My original demo app that I test it with S7 text size was 12. And when I try to test it in S6 I get overflow issue... I need to scale down or up with MediaQuery to set text scale factor, so it can work most of the devices without getting a overflow issues?
In ListTile I have a column that has 4 separate lines of text and all the value comes from database. If the text value is long I get a overflow issues on S6 device. So my question is How to use MediaQuery to set scaleFactor for text in Flutter?
Update:
new ListTile(
trailing: new Icon(Icons.chevron_right),
onTap: () {
},
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
‘My Account Details:’,
style: new TextStyle(
fontSize: 14.0, fontWeight: FontWeight.bold, color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
subtitle: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(‘Hello Flutter’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(’Today is **************’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(‘Name’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(‘Dart’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(’Surname’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(‘Flutter’,
style: new TextStyle(
fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(‘Account Name: Let’s Flutter all day long till down with fancy User Interface’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(‘109.65’,
style: new TextStyle(
fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
],
),
),
277
You can solve your issue wrapping your Text widget into a Flexible to avoid the overflow. I put maxLines 1 to see the Fade overflow :
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: new Text(
"Account Name: Let's Flutter all day long till down with fancy User Interface",
maxLines: 1,
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
),
new Text(
"109.65",
style: new TextStyle(
fontSize: myTextSize,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
I added a global variable :
var myTextSize = 12.0;
Also you can use the LayoutBuilder in order to get the maxHeight or maxWidth of your device, after that you can change the text size like this example:
var myTextSize = 12.0;
return LayoutBuilder(builder: (context, boxConstraints) {
print(boxConstraints.maxHeight);
if (boxConstraints.maxHeight <= 667.0){
myTextSize = 10.0;
}
return Container(
child: new ListTile(
trailing: new Icon(Icons.chevron_right),
onTap: () {},
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"My Account Details:",
style: new TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
subtitle: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"Hello Flutter",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(
"Today is **************",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"Name",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(
"Dart",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"Surname",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(
"Flutter",
style: new TextStyle(
fontSize: myTextSize,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: new Text(
"Account Name: Let's Flutter all day long till down with fancy User Interface",
maxLines: 1,
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
),
new Text(
"109.65",
style: new TextStyle(
fontSize: myTextSize,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
],
),
),
);
});
@override
Widget build(BuildContext context) {
return WidgetsApp(
// ...
builder: (context, child) {
final mediaQueryData = MediaQuery.of(context);
return MediaQuery(
data: mediaQueryData.copyWith(textScaleFactor: 1.5),
child: child,
);
},
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
