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),
)),
Related
I created a simple web app with Flutter.
The app layout is divided in two vertically zones: on the left there is a small top-bottom menu, on the right there is the main content inside a DataTable.
I wrapped the DataTable inside a SingleChildScrollView and everything worked fine.
The left side, on the other hand, keeps giving me a vertical overflow.
The tree on the left side is as follows:
Row(
children: [
//Left side menu
Flexible(
Container(
Column()
), //Container
), //Flexible
//Right side
Flexible(...),
],
), //Row
Obviously it is a very simplified version.
I've tried to insert a SingleChildScrollView in almost all places (Column, Container, Flexible), but it doesn't work and it always returns the error.
A RenderFlex overflowed by 174 pixels on the bottom.
Any solutions?
Thank you!
My approach would be to use MediaQuery to get current height and width of the web window. Then spilt the available width in the ratio of 2:7 maybe? You can play around with the ratio.
Now, lets keep the body of Scaffold to be Container with width as MediaQuery.of(context).size.width and height as ... .height. Now Row with childrens be 2 Expanded widgets with flex 2 and flex 7 respectively. Now we have to portion in the screen in the ratio 2:7.
On the left side, as you said, you need a menu, let it be
Expanded(
flex:2,
child: Column())
And on the other side be-
Expanded(
flex:7,
child: Container(
child: SingleChildScrollView() ///then add your stuff for scrolling purposes.
)
)
learn more about MediaQuery here
learn more about Expanded here
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 want to increase the size of an CircleAvatar as Leading of a Listtile. But if i increase the Radius the Circle doesnt keep its ratio and becomes an ellipse.
Here is my Code:
ListView.builder(
itemCount: friendlist.length,
itemBuilder: (BuildContext context, int index) {
print(friendlist[index]);
return ListTile(
title: Text(friendlist[index]["nickname"],
style: TextStyle(fontSize: 20)),
leading: CircleAvatar(
radius: 50,
backgroundColor: Colors.transparent,
backgroundImage: CachedNetworkImageProvider(core.url + "profiles/" + friendlist[index]["avatar_id"]),
),
subtitle:
Text(friendlist[index]["lost_last"])
);
}));
What I tried:
Nesting the Circle Avatar into a Container with fixed Width and Height -> Circle is still an ellipse
Changing the ItemExtent of the ListView.builder -> The Circle still cant use all of the empty space and becomes an ellipse.
Thanks
This is not currently possible with ListTitle, as this is the applied restrictions they have added for the standard of the widget
To be accessible, tappable leading and trailing widgets have to be at
least 48x48 in size. However, to adhere to the Material spec, trailing
and leading widgets in one-line ListTiles should visually be at most
32 (dense: true) or 40 (dense: false) in height, which may conflict
with the accessibility requirement.
You can create custom widget for your requirement.
There is a way to change the CircleAvatar actually , There are two properties related to size: minRadius and maxRadius. The are used to set the minimum and maximum radius respectively. If you already use radius, you are not allowed to use minRadius and/or maxRadius. On the contrary, if either minRadius or maxRadius is set, you are not allowed to use radius :
CircleAvatar(
backgroundImage: NetworkImage('https://www.woolha.com/media/2020/03/eevee.png'),
minRadius: 50,
maxRadius: 75,
)
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
)