I used CachedNetworkImage widget in my code. Whenever i am calling it, the size of image is too large.
And when i tried to limit it's height to some les number, it's contents or some part of it are lost. I am unable to solve this problem. Here is screenshot of the image without any constraints -
I want only half of screen should be covered, while maintaining the width.And when i reduce it's height to 450, some part of it is gone, i mean it's lost(Check the photo, you will understand). Here's the picture with height 450 -
(I want only half of screen should be covered, while maintaining the width.)
(See, at top left corner of the main image in both pictures, and you will understand my problem).
Here's the code of the widget -
Widget cachedNetworkImage(mediaUrl, context) {
return CachedNetworkImage(
height: 380.0,
width: MediaQuery.of(context).size.width,
imageUrl: mediaUrl,
fit: BoxFit.cover,
placeholder: (context, url) => Padding(
child: CircularProgressIndicator(),
padding: EdgeInsets.all(20.0),
),
errorWidget: (context, url, error) => Icon(Icons.error_outline, color: Colors.red,),
);
}
Boxfit.cover will ensure the image fills the 'area' you want your image in, without distortion. Because the image itself has a different aspect ratio than the area you have defined, then part of it gets cropped. Given your image aspect ratio does not match your 'containers' aspect ratio you really only have two options if you want the 'container' completely filled, the image has to be cropped or stretched (distorted) in some way. See this for a complete view of BoxFit: https://api.flutter.dev/flutter/painting/BoxFit-class.html
The only other alternative is to ensure that your target container has the same aspect ratio as the image you want to put in it.
Update
The aspect ratio is just how wide the container is versus how high it is, like TV screens old and new 4x3 and 16x9. You can define a container who's size, or at least aspect ratio, matches the size of the image. You can then wrap it in FittedBox to have it fit the part of the screen it is meant to occupy, on all device sizes. These layout widgets need quite a lot of trial and error before you get the hang of them. Just keep trying different options.
Related
I want to position custom widgets on top of an image based on X and Y coordinates. Think of it as an overlay. Until now, I have tried a solution, where I used a Stack in a combination with Positioned, to position widgets above the image. The problem arises when I try this solution on different screen sizes. The overlaid widgets are off, depending on the screen size I'm testing on.
Here's my current implementation:
Expanded(
child: InteractiveViewer(
constrained: false,
minScale: 0.1,
maxScale: 2.0,
child: Stack(
children: [
Image.network(widget.plan.image),
Positioned(
bottom: 2927,
left: 6700,
child: SvgPicture.asset("assets/svg/pin.svg", height: 200)
)
],
)
),
)
Note that I'm also wrapping everything in InteractiveViewer because the Image I'm getting from the backend is very large.
EDIT: I have noted that for some reason the image dimensions are different on different displays. For example, photo dimensions on iPhone X are 10224x6526, where on iPhone 13 Pro Max image dimensions are 8192x5228. I am now investigating further why this is happening as this is probably the reason why custom widgets drawn on top are shifted on different screens.
EDIT 2: After a long research I've finally came across something. I own two physical devices - iPhone 12 and iPhone X. I was testing on simulator and something really odd happened; simulator is logging different image dimension simulating the same physical device - let me explain:
Original Image dimension coming from backend:
10224 × 6526
iPhone 12 simulator image dimension log after network call:
8192x5228
iPhone 12 PHYSICAL device image dimension log after network call:
10224 × 6526
iPhone X PHYSICAL device image dimension log after network call:
10224 × 6526
Which effectively means that something is working differently regarding the image scaling when using iOS simulator and physical device.
The best way to do this will be to try to position your items relative to the screen's width and height in percentage.
bottom: MediaQuery.of(context).size.height * 0.5 // 50% of the screen's height
left: MediaQuery.of(context).size.width * 0.3 // 30% of the screen's width
You are free to change the percentiles to suit you.
EDIT 2
x = (6700/width-of-photo) * 100
y = (2927/height-of-photo) * 100
With the issue concerning the size of the image, you might want to consider placing it inside a widget and giving it a max-height and max-width values.
I am coming to Flutter from a web background, where I am used to defining screen elements in terms of percentages of the height and width of the screen, or of elements that contain them.
I just completed a course.
Now that I am enthused and want to start building an app, I am a little confused, as the course only spoke of heights & widths in absolute pixel values. I can see this being problematic with different aspect rations, and especially with different orientations.
Is there a canonical approach to this? The official docs also seem to use absolute pixel values, so maybe I am missing a fundamental point.
A search suggests that I might use MediaQuery and then scale everything according to that. But, I don't see widespread use of that in code samples.
Is there a non-opinionated standard approach?
I am a little confused, as the course only spoke of heights & widths in absolute pixel values.
Actually, flutter uses density independent pixels (dp) for width/height arguments. dp actually scale with resolution, meaning 1 dp is displayed as the same PHYSICAL distance on every device. You don't have to worry about your elements being displayed at different sizes, just because the resolution of the screen they're on changes.
To be precise, flutter calls them logical pixel and:
By definition, there are roughly 38 logical pixels per centimeter, or about 96 logical pixels per inch, of the physical display.
So think about them as you would think about cm.
I am used to defining screen elements in terms of percentages of the height and width of the screen
Nonetheless, you might want to layout your widgets in a relative fashion (relative to the screen or the parent). For that purpose, flutter has different solutions:
Flexible
Expanded
Wrap
MediaQuery
LayoutBuilder
GridView
other layout options
Is there a non-opinionated standard approach?
It is a very opinionated question to begin with, but for example, Material design is a common standard for mobile-design. Flutters layout widgets are based around this approach.
But in the end, it is your design choice. For example, to achieve a responsive layout grid you could use Wrap, or you could use LayoutBuilder and determine yourself how you would like to layout rows and columns.
I would recommend you to scale widgets based on the size of the screen. This allows your application to be more flexible and adjust to various platforms and sizes such as large tablets or small phones. In order to do this, I recommend you to use the widget FractionallySizedBox which allows you to size widgets using a percentage of the screen size. For example, if you want a button widget to fill up 50 percent of a screen's width you can use the following code:
Container(
alignment: Alignment.center,
child: FractionallySizedBox(
widthFactor: 0.5,
child: FlatButton(
onTap: () {},
child: Text("PRESS HERE")
)
)
)
This code creates a button positioned in the center of the screen with a width of 50 percent of the screen size's width. You can also change the height of the button with the heightFactor field. By using this code the button widget will scale up and scale down for different screen sizes while still maintaining a size of half of the screen's width. For more resources, you should check out this video by the Flutter Team: https://youtu.be/PEsY654EGZ0 and their website on the FractionallySizedBox here: https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html.
The FractionallySizedBox however is only one of many different approaches to making your flutter app fit to different screen sizes. Another approach is to use the AspectRatio Widget. Below is an example of this:
Container(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 3/2
child: FlatButton(
onTap: () {},
child: Text("PRESS ME")
)
)
)
This code will create a button with a 3 to 2 ratio between its width and height. If the screen size changes the button will increase or decrease in size accordingly while again maintaining the 3 to 2 ratio. If you want more information the Flutter team also has a video on it (https://youtu.be/XcnP3_mO_Ms) along with some documentation here:(https://api.flutter.dev/flutter/widgets/AspectRatio-class.html).
Both widgets are perfectly fine and are considered standard practice to use but I personally use FractionallySizedBox more.
I hope my answer was helpful.
Is there any way to change size proportions for letters (words/texts) in Flutter?
Ideally, I need to have the ability to change the size of some Container, for example, and the Text child of this Container has to fill all the space from edge to edge, no matter what size proportions this container has. If the container has size 10*200 and the child of this Container is Text with "3", so three number has to be very thin/tall looking number. I hope it makes sense.
Pictures below are showing what I mean, approximately (don't look at the red background):
The first picture has, let's say, the proportion of 20*160 and the seconds on has the opposite (160*20).
Maybe there are some packages for that?
Just for people who might have the same questions, the transform widget will be something like that:
Transform(
transform: Matrix4.identity()
..setEntry(0, 0, xProportion),
..setEntry(1, 1, yProportion),
alignment: FractionalOffset.center,
child: Text("3"),
)
I get a strange margin under my GridView:
This image is from an IOS simulator, here's how it looks on a smaller screen on Android where the margin appears to be gone or a lot smaller:
Here's the code:
Column(
children: [
GridView.count(
shrinkWrap: true,
crossAxisCount: 8,
children: tiles
),
Text('mamma')
]
)
Each element in the grid (tiles) is an EmptyTile widget:
class EmptyTile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: bgColor,
border: Border.all(color: borderColor)
)
);
}
}
I really can't figure out what this margin is or where it comes from, whether it has something to do with shrinkWrap or something else.
How can I remove this margin?
EDIT:
As requested here's the fullscreen images without the simplified example.
IOS:
Android:
Try this. by default it has padding and you should set padding to zero.
GridView.builder(
padding: EdgeInsets.all(0),
The difference in layout you experience comes from a combination of things:
How GridView manages its size.
How widgets are placed in a Column.
GridView tiles and size
When you build a GridView, its width and height are implicitly deduced from the crossAxisCount parameter and the constraints given by its parent.
The constraints are the limits in size in which the widget is allowed to draw.
The crossAxisCount defines how many tiles should fit in one line (row or column). Depending on its scrollDirection, it will either try to fill all the available width or height. By default this direction is set to Axis.vertical, which means that the width will be filled.
So when we come back to your example, this means that the size of each tile will depend on the width of the Column containing your grid, divided by the number of tiles you set in crossAxisCount. This size will be both the width and the height of every tile in your GridView.
Once Flutter knows the size of each of your tiles, it sets them on each row, until all tiles are placed or there isn't any available space.
Column layout
Now that we know more about GridView, we need to understand how Column builds its layout.
Columns allocates space to each widget in its children, following an algorithm best describes in the docs.
tl;dr:
Your GridView will only fill its own height in the Column, leaving the rest as free space. This is why you get empty space in your Column.
Possible fix
I actually don't really see how this is a problem. GridViews are supposed to only extend to display their children, so it totally makes sense for it to stop when it completed.
The thing is, most of the times this ind of grids are not used with a finite list of children, and more likely with a growing list.
If you only want to have one line of tiles, that will extend using the available space, you could use a simple Row.
If you want multiple lines of tiles, with non-square tiles, you need to dive a little deeper into GridView.custom.
Edit after question was updated with more screenshots:
It is possible that you need to rethink your layout so that the player panels are in the same Column than the game board. You will have a much better control over the layout this way.
I am learning flutter and currently switched from android to flutter.In flutter i mostly get an error something like
bottom overflowed by 234 pixels or renderbox overflowed by 340 pixels.And i fixes that problem by increase the height of the widget.If so then how to know that what much size giving to widget.I mean in android we can declare the height of the layout to be wrap content and its works perfectly.Please explain me that how can i avoid this situation because if i fixes the issue by changing the height of widget in one device then in devices of other screen sizes if throws same error ?Here is a image which throws an error.Ignore the red error , see the error in below screen.Thanks in advance.
!https://imgur.com/a/PsZzeMp
If you want to give fixed width and height to your widgets wrap it with SizedBox.
You can specify fixed width and height and you child widget will be the exact dimension.
If you want one of the dimension fixed and the other as big as the parent widget, you can try something like this:
SizedBox(
width: double.inifinity,
height: 50.0
child: Conttainer()
)
If you are worried about giving fixed dimensions. You can give the height or width according to the ratio of the screen size. You can get the height and width of the screen like this:
double width = MediaQuery.of(context).size.width;
Use the above value to give the width to your widgets like below:
Container(
width: MediaQuery.of(context).size.width * 0.8,
height: 100,
)
To answer question in the comment. You can do the following to wrap the text with dynamic content.
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 100
),
child: Text(
'ADASFASF ssss'
),
)
The above code will wrap the text to next line if the text widget is more than 100 pixels wide. As we don't have any constraints on the height.
Overflow happens when the minimum size of a child widget is bigger than the parent's constraints (width and/or height).
Which means you can:
make the parent widget bigger (eg: SizedBox(height:, width:,))
make the child smaller (eg: using a FittedBox(fit: BoxFit.scaleDown) widget)
Though the first method will not allow you a size bigger than the parent's parent widget. It should be enough to build the children relatively to their parents and not the other way.
In your case, it seems like you text + image widget is taking a little too much space. I recommend wrapping it in a FittedBox that will scale down the child widget until it fits in you bottom bar.
FittedBox(
fit: BoxFit.scaleDown,
child: _buildChildWidget(),
)
You can then wrap it in other widgets to build the layout you want (Row, Expanded, Flexible, LayoutBuilder, ...).
As the overflow issue usually happens because text or images are too big. A good exercise is trying to make your app work while setting text size to the maximum value allowed by the accessibility options of your device. You can do the same with images by setting an image size relative to your text size for example.
Paddings and margins can also cause problems because they leave less space for the child widget.