I have a card with 2 Text widgets and I want to have them not overflowing regardless of the fontSize set in accessibility settings by the user. I'm doing this calculus and it overflows right away.
I added a constant to the total height so it doesn't overflow but when I increased the font size even more from settings it's overflowing again.
What am I missing here?
double getCardHeight(BuildContext context) {
final scale = MediaQuery.of(context).textScaleFactor;
double bodyFontSize = Theme.of(context).textTheme.bodyText2?.fontSize ?? 0;
double bodyLineHeight = bodyFontSize * scale;
double titleFontSize = Theme.of(context).textTheme.headline5?.fontSize ?? 0;
double titleLineHeight = titleFontSize * scale;
final textsHeight =
(titleLineHeight * titleMaxLines) + (bodyLineHeight * bodyMaxLines);
final cardHeight = textsHeight + verticalPadding * 2;
print("card height = $cardHeight");
return cardHeight;}
You should do this a bit differently. Instead of calculating the text height and then using that to size the cards, put your text widgets inside Flexible widgets and put those flexible widgets inside a Row.
Row(
children: [
Flexible(
child: Text('My text'),
)
],
),
This will make it so the text wraps whenever its about to overflow.
I figured it out. I have my text styles defined in the theme. However, I did not set a height to the styles. When doing the math I assumed the height of the font is 1 but it was not. After I specified height: 1 to all my text styles the math works fine
Related
I want to locate each widgets across the height of the screen without scroll widget (It means the total height of screen is always fixed), but do not know to implement those widget generally.
For example, height of Iphone 13 is 2532 pixel but 13 pro max is 2778.
If total height of screen is fixed (non allowed to scroll), all widgets should be more shorten (like 70%-80%)than former for pro max.
Should I use MediaQuery class or other responsive libraries generally?
Making the size of height of a button dynamic is not recommended. You can check telegram signup button the height will stay but the width will be dynamic and reduced x pixel from left or right using margin.
if you are trying to make a floating button like whatsapp which is no matter size of the screen the height and width will stay, you can customize it on floatingactionbutton()
but if you still want to customize the height you can use this logic:
var heightOfMyPhone = (MediaQuery.of(context).size.height);
InkWell(
onTap: (){
//code here
},
child: Container(
height: heightOfMyPhone > 300 ? (heightOfMyPhone*0.5) : 100,
width: MediaQuery.of(context).size.width,
padding:const EdgeInsets.fromLTRB(10, 10, 10, 10),
)),
I need ag-grid to be responsive on all devices. When I tried this.gridApi.sizeColumnsToFit() It looks nice on desktop, but in mobile screen column width gets zero
as shown in this image.
When I give this.gridColumnApi.autoSizeColumns(allColumnIds, false); it leaves a blank space if there are less number of columns like shown in this image.
Is there a way to autoFit in desktop and autoSize in smaller screens?
you can call them after another. I'd suggest to first call the autoSizeColumns.
Afterwards you calculate the actual tableWidth with something like
const tableWidth = grid.columnApi.getAllColumns()
.reduce((i, current) => i += current.getActualWidth(), 0);
and then you calculate the actual container width
const {left, right} = grid.api.getHorizontalPixelRange();
const containerWidth = right - left;
and only if the tableWidth is smaller than the container width you call `sizeColumnsToFit``
if (tableWidth < containerWidth) {
grid.api.sizeColumnsToFit();
}
I have a RaisedButton which has a child Text and some Padding inside.
When I press the button, I'm using an AnimatedBuilder and Container to resize the width of the container to show a loading indicator.
return Container(
height: widget.height,
width: lerpWidth(widget.width, minWidth, _animation.value),
)
Now the problem is that I don't want to use a fixed width for my container since the text can be variable from length (translations, showing numbers, ..). If my passed-in string length would be bigger then the Container would not scale with it. I also don't want my button to expand the whole width of the screen.
So basically I want to expand my button to the minimum width of the child (including padding) and use that width to animate the container to show a CircularProgressIndicator
I am developing for an app for mobile devices and android tv(48 inches TV). I adjust fontSize, widget sizes using MediaQuery. Is there any better way to do these things?
static double width(BuildContext context) => MediaQuery.of(context).size.width;
height: height * 1 / 32,
textSize: height * 1 / 32
Line > Container widget
CustomLine(
width: width * (1 / 8),
height: height * (1 / 512),
color: Palette.white,
),
It depends if you want the size with or without the safe Area :
https://stackoverflow.com/a/57237870/12937274
You can also try that:
import 'dart:ui';
window.physicalSize;
I have never developed anything for such a screen, but I have used the auto_size_text package in the past to easily size text automatically based on available space, and it works really well. With this package, you don't need to handle the sizings explicitly for every Text.
Another way of doing it could be to use the LayoutBuilder class to get the available space around your Text widget, and handle the proper sizing yourself.
What is best practice for creating a responsive layout? I know that you can use media queries to get sizing information to dictate what to do; e.g. different screens for desktop, tablet, phone.
However, is it common practice to use Expanded or Flex properties to ensure widgets grow or fill the appropriate screen sizes? As a new Flutter developer, trying to understand how the balance is struck on typical use cases.
There are multiple ways to make your UI responsive in Flutter, but just to name a few rules of thumb that will mostly get the job done:
MediaQuery
You can set some widget height or width based on a portion of the screen, for example, creating a SizedBox that will fill 50% of the screen both vertically and horizontally:
SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.5,
)
There are other properties that might interest you in the MediaQuery such as the padding from the safe area viewport and so on. You can also find a good article about it here.
LayoutBuilder
One of the most interesting widgets when it comes to build layouts. It will provide you with the parent constraints so you can use it to dynamically adapt your UI.
For example, this will make your child (SizedBox) widget take the parent's maxWidth.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints){
return SizedBox(
width: constraints.maxWidth
);
}
)
Some interesting article about LayoutBuilder can be found here.
Flex
By using Flex widgets such as Expanded and Flexible. When used in a Row or Column they'll dynamically adapt based on the constraints imposed by them and along with Column and Row alignments/size they are quite powerful enough to make your UI responsive.
For example, you can have a two Containers in one Row where one uses 1/4 of the view and the other takes 3/4 of the space available.
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 3,
child: Container(),
),
]
)
Another great article about it can be found here.
Platform
Also, you can always lookup for the underlying platform to make some decisions by using the Platform class getters.
import 'dart:io';
if(Platform.isAndroid) {
print('Running on Android');
}
TL;DR: There are a lot of options that can be played together, you should always look for the best approach for each scenario.
In responsive UI we don’t use hard-coded values for dimension and positions. Use Sizer plugin to get the real time size of the window.
Responsive UI in any screen size device also tablet. Check it this plugin ⬇️
https://pub.dev/packages/sizer
.h - for widget height
.w - for widget width
.sp - for font size
Use .h, .w, .sp after value like this ⬇️
Example:
Container(
height: 10.0.h, //10% of screen height
width: 80.0.w, //80% of screen width
child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);
I have build many responsive UI with this plugin.
I still think it is better to get the screen size using this commands. You have more control and and you can make your design responsive.
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
There is another package called size_configure that helps you to make your Flutter app responsive. Just import the package and then use it to make your app responsive.
use textSizeMultiplier to set Text size
use imageSizeMultiplier to set Image size
use heightMultiplier to set height size
use weightMultiplier to set weight size
For example:
If you want to set the text size to 28
Divide 28 to 7.9 (because it's text, so we use 'Vertical Block Size')
and then multiply it textSize Multiplier
var width = MediaQuery.of(context).size.width; //width of device
// now we can find the number x% which will return value 10 on multiplying
//by the width of device
var x = (1000/(width))/100;
var ten = width * x; //now ten contains value 10.
//now we can use this value ten like:
ten * 1.5 //returns 15
ten * 3.5 //returns 35
ten * 4 //returns 40
Container(
heigth: ten * 3.7, //height = 37
)