I tried to use Image.network() flutter widget to view a thumbnail image from youtube video which was added manually but the image in the widget displays with top and bottom.black screen but not a full one based on the container width and height as below image
What could be a problem?
Stack (
children:[
Container (
child: Image.network (
Url,
fit:BoxFit.cover,
height: 500,
widht: 400
),
Container (
aligment:Alignment.bottonLeft,
child: Text (
Name
)
)
)
]
);
Use fit property.
Image.network(fit:BoxFit.cover, src: 'image path')
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,
),
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()),
]));
}
}
i needs zoomable image slider with cached network image something like this:
user can zoom on it and back
You can try this plugin from Flutter to create the slider "Carousel Slider"
https://pub.dev/packages/carousel_slider
and Include photos in Photo view widget
PhotoView(
imageProvider: AssetImage(photos),
backgroundDecoration: BoxDecoration(color: Colors.white),
),
I wanna make a decorated border as in the image in scrollable widget
Your images dimension is 473 × 670. Corner decoration size 115 x 115. So you can use the centerSlice property to stretch your image according to your needs. Just like this...
Image.asset(
"images/decorated_image.png",
height: 1000, // device or widget height
width: 350, // device or widget height
centerSlice: const Rect.fromLTRB(115, 115, 358, 555),
)
Now you can use stack or any other of your prefered method to put this behind your scrollable list.
You can use Stack:
Stack(
children: [
Image(), // your border image
Container(margin: EdgeInsets.all(12)) // other widgets inside border
]
)
Hi all fellow developers,
I am developing a responsive web page in flutter using the flutter web SDK, but i am stuck at one part of the page where i have a Row inside row I have 2 Containers among which i want the 1st Container to be Scrollable and the Second container to be of constant size(Non scrollable) just like whatsapp web ui where contact list keeps scrolling but the chat side and the rest of the page doesn't.
please Help me,
Thanks in advance...
This should work You need a fixed sized container and make sure a Scroll able widget should be inside it. Now size can be made responsive by using Media Query Parameters and below code you only need to adjust space and sizing and it would work.
Row(
//Your parent Row
children: [
Container(
//static non scrollable container
child: Column(
children: [
//Children you want to add
//this wont be scrollable
//It is also preferred that you give this some height or width too
],
),
),
Container(
//Scrollable container
//Please adjust height and width yourself
//You can use media query parameters to make it responsive
width: 200,
height: 500,
child: SingleChildScrollView(
//You can also change the scroll direction
child: Column(
//Add children you want to be in
//Scrollable column
),
),
)
],
),