This is how I set up a fullscreen image
Image.network(
"https://cdn.pixabay.com/photo/2017/02/21/21/13/unicorn-2087450_1280.png",
fit: BoxFit.contain,
height: double.infinity,
width: double.infinity,
)
I want to implement resize animation to switch between image fit BoxFit.contain or BoxFit.cover(like a lot of video app did)
I am pretty new for the animation behavior, could anyone give a help, thanks.
If you just want to switch the fit value then you'll need to create a StatefulWidget and keep the the fit value as a member variable and then call setState() and change the value in there. There won't be animations but you can take care of that using an animated container. So the steps would be:
Switching fit value
Turn your view widget into a StatefulWidget
Store your BoxFit value as a memberVariable. BoxFit _imageFit
Change _imageFit inside a setState call.
setState(() {_imageFit = BoxFit.fitHeight;});
Animating your image size
Wrap your image in a AnimatedContainer() widget and set it's dimensions using local member variables
double _animatedContainerHeight = yourStartingValue;
double _animatedContainerWidth = yourStartingValue;
...
AnimatedContainer(height: _animatedContainerHeight,
width: _animatedContainerWidth, child: YourImage);
Supply the AnimatedContainer with the duration and interpolation and then Change the size of it in the setState function mentioned above.
setState((){
...
_animatedContainerWidth = newValue;
// same for height
});
Related
to display image according to it's original size i do the following
Image.file(File(fileCreated!.path)),
to display image to fit height and width (full screen) i do the following
Image.file(File(fileCreated!.path),fit: BoxFit.cover,height: double.infinity,width: double.infinity,),
ok it is now in full screen but i noticed there is some missing parts of the image contents is no longer visible on screen like 20 pixel from width and height , i know flutter do it for keeping the image quality the same. but How i ignore that behavior
How could i display image in full screen so the whole image parts is visible on screen ?
i tried with following
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
whatever i change the height. the width will be auto changing too, even if i did not change the width !!!!
but same result
edit :
full parent
#override
Widget build(BuildContext context) {
return Scaffold(
body: Image.file(File(widget.imageFile,),fit: BoxFit.cover,height: MediaQuery.of(context).size.height,),
);
}
}
You can use MediaQuery, but I will prefer using LayoutBuilder on top widget. Also check the parent widget if it is having padding/margin.
Image.file(
File(fileCreated!.path),
fit: BoxFit.fill,
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
i am trying to make a listview with lots of images with different dimensions loaded from network.
When I scroll down everything is okay, but when i am scrolling up, first images start to load changing the position of listview. I suppose I need to have a placeholder for images with height of image, but i dont know how to get their dimensions before them loaded. Or i need smth like listview that does not move because of smth upper loading.
I wrote a function that gets a height of image in a cycle (array favorites contains Maps which contain url parameter and height parameter if loaded). The function also converts image's height in the size i actually need by formula with MediaQuery.of(context).size.width - 80 which is the width of images on screen. (Width of the screen minus 40 padding from each side).
This is the code of getting height function:
Future<void> getImageHeight(String url, index) async {
Image image = Image.network(url);
image.image
.resolve(const ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo info, bool isSync) {
favorites[index]['height'] = info.image.height *
((MediaQuery.of(context).size.width - 80) / info.image.width);
setState(() {});
}));
}
And this is the code of image with placeholder (Container):
Container(
color: const Color(0xffE8E6EA),
height: favorites[index]['height'] == null || favorites[index
['height'].isNaN ? 0: favorites[index]['height'],
child: Image.network(
favorites[index]['url'],
width: double.infinity,
),
),
On first loading size of placeholder is still going to be zero, because it takes time to get height of them. But after few time (it usually takes about a second or less) setState is going to be called and images will not lag on scrolling. And if you are loading your images urls from database not all at once you'll need to rerun function to get height of newly added images.
Set minCacheExtend large enough
(to be higher than the highest picture's height)
I had the same issue, I resolved it by Increasing the cache of the flutter app. Default cache size is 100mb. You can place this at the beginning of main.dart
WidgetsFlutterBinding.ensureInitialized();
PaintingBinding.instance!.imageCache!.maximumSizeBytes = 1024 * 1024 * 300; // 300 MB
More Info Here
Lets say you have a ListView of variable height:
List items are a Container with a mix of text and images. As such, the list items are of variable height. Sometimes no images. The text renders immediately as expected, but the images may take time to retrieve and render on screen
The images are retrieved from the network using CachedNetworkImage
Images are of variable height
When the Screen is opened the ListView automatically scrolls to item#11 (using ensureVisible technique)
So there are items both above and below your current position
At this point, when one of the network images above your position load up, the entire ListView will be pushed and you will no longer be looking at Item #11, rather somewhere randomly higher up
I considered initiating a new scroll in a callback after each image loads, however, due to network speeds, usually the listview scroll will finish before all the images load. If there are a lot of images, the images could take time to load, so it would be unreasonable to initiate a new scroll each time a new image is loaded, the screen just keeps scrolling forward every few seconds. It becomes dizzying and annoying.
Alternatively, the scrollview could jumpTo a new position as soon as the image loads, but I'm imagining there would be a slight delay between the two events and the user perceive a small "glitch" as the image loads and the listview immediately jumps to offset the image load. Even using a Future.microtask there is a very small perceptible 'glitch' as the image loads and the jumpto fires
It would be most preferable to have the listview expand the content upward somehow, so that the users current scroll position is maintained, as far as they are concerned.
Is it possible to have the ListView keep its position as the images load?
Assuming you have a predefined size for your images, you can wrap the image in a SizedBox(). This way your list will always have the same height and your items won't get pushed around.
EDIT:
Since your images are of variable size, I would probably animate to the desired location on every image load.
CachedNetworkImage has a callback
imageBuilder: (context, imageProvider) {
/// Animate to desired index
return Image(image: imageProvider);
}
Animated container, might help you. It can adjust the height automatically, depending on the height u provide in builder.
Also you can use this answer to determnin image height and width in rnutime.
Images are of variable height
To overcome this, Either we take the image size or aspect ratio of the image while storing the image along with other data.
While retrieving data, along with other text data we will receive the aspect ratio or height for the image.
I would use the same height or ratio and show placeholder image till images are loaded.
CachedNetworkImage(
imageUrl: countryList[index].flagUrl,
height: 60, // Set your height according to aspect ratio or fixed height
width: 60,
fit: BoxFit.cover,
placeholder: (_, __) => Container(
alignment: Alignment.center,
height: 60, // Set your height
width: 60,
color: Colors.red.withAlpha(80),
child: Text(
countryList[index].name[0],
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
)
Image must be of specific aspect ratio I believe. You can define height according to aspect ratio.
Try as follows:
ListView.builder(
shrinkWrap: true,
itemCount: images.length,
itemBuilder: (ctx, i) {
return Column(children: [
ButtonItems(i),
const SizedBox(height: 10),
]);
}));
Button Items class
class ButtonItems extends StatefulWidget {
final int i;
ButtonItems(this.i);
#override
_ButtonItems createState() => _ButtonItems();
}
class _ButtonItems extends State<ButtonItems> {
var images = [
"https://opengraph.githubassets.com/2ddb0ff05ef9ccfce35abb56e30d9c5068e01d1d10995484cfd07becee9accf7/dartpad/dartpad.github.io",
null,
"https://opengraph.githubassets.com/2ddb0ff05ef9ccfce35abb56e30d9c5068e01d1d10995484cfd07becee9accf7/dartpad/dartpad.github.io"
];
#override
Widget build(BuildContext context) {
print(images[widget.i]);
return Container(
height: 50,
color: Colors.grey,
child: Row(children: [
AspectRatio(
aspectRatio: 3 / 2,
child: images[widget.i] == null
? Container()
: Image.network(images[widget.i]!, fit: BoxFit.cover),
),
Text("Title " + widget.i.toString()),
]));
}
}
Is there any way to set parent container's height based on height of what is drawn in the child canvas?
I am using a custom painter like this:
double width = MediaQuery.of(context).size.width;
return Container(
color: Colors.yellow,
height: 240,
width: width,
child: CustomPaint(
painter: ShapePainter(),
),
);
Then ShapePainter() draws different shapes (1 shape for each canvas in the list).
But as you can see, some shapes like 2nd rectangle, take twice the space they actually need.
I can calculate height of a shape inside ShapePainter() easily,
but I have no idea how to apply it to its parent's height. (Except calling an insta-setState() from child, but there should be a better way, because this may flicker for one frame)
Thanks for any help!
Flutter has several phases that it goes through when creating a frame, including building, layout, and painting. The size of widgets is determined during the layout phase. So you can't set the height based it what was painted. (Except, as you've said, by using something like setState to generate a new frame.) You'll have to determine the the size you want before any painting has happened. For example, you can give your CustomPainter a getter to provide the shape:
class ShapePainter extends CustomPainter {
ShapePainter({#required this.shape});
final Shape shape;
void paint(Canvas canvas, Size size) {
// the painting
}
Size get size {
// determine size based on shape
}
}
...
Widget build(BuildContext context) {
final shapePainter = ShapePainter();
return Container(
color: Colors.yellow,
height: shapePainter.size.height,
align: Alignment.center,
child: CustomPaint(
painter: shapePainter,
),
);
}
How do I get flutter to resize my Image widgets using nearest neighbour interpolation if the size of the widget is not the same as the asset size?
class PlayContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Color.fromARGB(255, 0, 110, 255),
child: SafeArea(
child: Image(
fit: BoxFit.contain,
image: AssetImage("assets/knight.png")
)
)
);
}
}
This resizes the image correctly, but it is blurry due to the bilinear interpolation used to resize it.
Based on the source seems to be rather hard coded?
This is now possible in the master branch thanks to this Pull request:
I've added the possibility to set the filterQuality on Images. This was hardcoded.
The previously hardcoded value is set as default parameter.
Some images look better when scaled with no filter quality (like pixelart). That's why I added the parameter.