I have an overflow on this image :
Container(
width: MediaQuery.of(context).size.width,
child: Image.network(imageSomwhereFomTheInternet),
),
How can I display a generic image from the internet preventing it to change its proportions? (I mean, if I fix an height or width the image could be "damaged" by this decision, I would like to use an automatic widget that fit this image in a certain Box, or something like that).
I don't know much about "How handle images", if you can suggest me something easy to understand where I can read more I would be very happy.
You can use fit property of image
Container(
child: Image.network(
"https://images.unsplash.com/photo-1547721064-da6cfb341d50",
fit: BoxFit.cover,
),
)
You can choose which suits you best from following:
BoxFit.contain- As large as possible but contained within the Container
BoxFit.cover- As small as possible but covering the entire Container
BoxFit.fill- Fill the entire Container but may distort the image aspect ratio
Related
I want to set images to my custom frame(frame is a png file) like image below.
image
image reference (https://favpng.com/png_view/film-strips-photographic-film-filmstrip-photography-photo-booth-png/EDuYNtkt)
use can try this it will help
Expanded(
// your image goes here which will take as much height as possible.
child: Image.asset('asset', fit: BoxFit.contain),
),
or
Image.asset('asset', fit: BoxFit.fill)
I want to have a card/container which fits the whole screen. In this card exists an image asset. However, trying to fit the image in a Expanded Widget just scale it as far as it reaches a boundayry of the screen.
Is there any way to scale it up (and of course clip/crop the image by this) so it fills up the entire screen without reaching these overflow messages? Also the user should not be able to scroll in the overflowed part.
This code should help you, you can use the image as a widget as a Container's child too;
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(filepath),
),
),
);
I have noticed this issue a few times with times while loading my app in the emulator. My background image on my Homescreen seems to load in slow and shows a White screen/placeholder while it is loading.
Oddly enough, I've heard more complaints about this "white screen issue" from my iPhone users. They even complain about the screen just staying white and the image never loading.
I am just curious if this is something others have seen and if so, how you solved the issue.
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken),
image: const AssetImage(AppStrings.graffitLogo),
fit: BoxFit.cover,
),
),
)
[
Flutter newbie here.
Basically I'd like to reproduce the effect of the background in this video:
https://youtu.be/LcCtg1D_RIE?t=804
From what I have gathered so far, I can use a Stack widget to set some background layer, and use the repeat property of Image to get a repeating tile pattern. The following code does this reasonably well:
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Container(
width: 5000,
height: 5000,
child: Image.network(
"https://www.scirra.com/images/articles/daf.png",
repeat: ImageRepeat.repeat,
)),
/* UI goes here */
]);
What I cannot figure out, is how to perform the animation. I have tried various scroll classes (like SingleChildScrollView) but they seem more designed for interactive use and do not allow bi-directional scrolling.
Another idea I have explored is providing a translation matrix to my Container, but while this indeed scrolls the pattern, it also leaves a black area at the edge of the screen.
I'm sure there exists a smart trick to easily achieve that effect - would someone have some clever input?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I try to load this image using NetworkImage and show it. But instead i get half the picture and the rest is a white background on view and has very low quality. Please, help me how show this image or split this image on 3 image. Thanks.
code
preview this picture on phone
You'll have to set fit property as BoxFit.fitWidth and set the width size as the size of your screen.
Also you need to wrap the Image widget inside a SingleChildScrollView because your image is too large.
return SingleChildScrollView(
child: Container(
child: Image.network(
"http://img.mangachan.me/manga/-9new/b/1511440860_blessed_v1_ch1/__________________._.jpg",
fit: BoxFit.fitWidth,
width: MediaQuery.of(context).size.width,
),
),
);
Consider to split your large image into small pieces.