I am showing images on gridview but i have a problem. I want to make the image's height and width equal.
This is the picture and I want to make image on the right to the have same width and height like the left one.Or at least put a white cover to missing part.
This is my code:
child: Consumer<Images>(
builder: (ctx, titles, ch) => GridView.builder(
physics: ScrollPhysics(),
itemCount: titles.items.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: getSize(_currentSliderValue),
mainAxisSpacing: 50,
childAspectRatio: 115/162.05,
crossAxisSpacing: 5,
),
itemBuilder: (ctx, index) {
saveallimages(titles.items);
return GestureDetector(
onTap: () => add(titles.items[index].image),
//()=>add(titles.items[index].image),
child: selected.contains(titles
.items[index].image.path
.toString()) ?
Container(child: selectedimage(titles.items[index].image)) :
Container(child: nonselected(titles.items[index].image))
);
And this is my widget function:
Widget selectedimage(image) {
return Stack(children: <Widget>[
Image.file(image, fit: BoxFit.cover),
Positioned(
right: 12,
bottom: 10,
child: Image.asset("assets/images/selected.png", width: 26, height: 26),
)
]);
}
Widget nonselected(image) {
return Stack(children: <Widget>[
Image.file(image, fit: BoxFit.cover),
]);
}
selectedimage function is to put check icon when the image is selected.
Instead of use Image.file or Image.asset as a child you can try using AssetImage or FileImage inside Container decoration like :
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(image),
fit: BoxFit.cover,
),
)
)
Related
In Flutter, I want to move an image in a container into another container positioned another part of the screen with animation.
Which animation packages do I need to use to do this? Can you help me?
Best wishes...
When I click on one of the playing cards in the image, I want the card to be moved into the container in the center.
Use flutter_draggable_gridview: ^0.0.7
DraggableGridViewBuilder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3),
),
children: _listOfDraggableGridItem,
isOnlyLongPress: false,
dragCompletion: (List<DraggableGridItem> list, int beforeIndex, int afterIndex) {
print( 'onDragAccept: $beforeIndex -> $afterIndex');
},
dragFeedback: (List<DraggableGridItem> list, int index) {
return Container(
child: list[index].child,
width: 200,
height: 150,
);
},
dragPlaceHolder: (List<DraggableGridItem> list, int index) {
return PlaceHolderWidget(
child: Container(
color: Colors.white,
),
);
},
);
I'm currently using a custom widget similar to this chips_input library. However, I don't want to give the options view (the popup list) a static maximum height. What I want to achieve is to dynamically set a maximum height of screen height - popup y offset. In this way, bottom of the options view will be at the bottom of the screen and all of the content inside the options view will be visible through scrolling. Is there any that I can access the textfield's or options view's offset to calculate the height?
My autocomplete widget looks similar to this:
RawAutocomplete<T>(
...
optionsViewBuilder: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: textFieldWidth,
child: Material(
elevation: 16,
child: ListView.builder(
shrinkWrap: true,
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final T option = options.elementAt(index);
return suggestionBuilder(context, option);
},
),
),
),
),
);
You can do this by putting a height on your SizedBox that uses MediaQuery to get the screen height:
popupOffset = 20;
RawAutocomplete<T>(
...
optionsViewBuilder: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: textFieldWidth,
height: MediaQuery.of(context).size.height - popupOffset,
child: Material(
elevation: 16,
child: ListView.builder(
shrinkWrap: true,
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final T option = options.elementAt(index);
return suggestionBuilder(context, option);
},
),
),
),
),
);
No matter what I do I can't seem to adjust the height of a nested Container in my flutter app. It always seems to inherit the height of the parent Container. Everything I read online said to wrap the inner container with a Center(). I tried this but still ended up with the same issue.
final _recommendations = <String>["Embroidery", "Jewelry Making", "Tennis", "Hiking", "Disc Golf"];
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 16.0),
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _recommendations.length,
itemBuilder: (context, index) {
return Container(
width: 150,
height: 50,
child: Card(
color: Colors.blue,
child: Center(
child: Text(_recommendations[index])
)
)
);
}
)
)
);
Seems to me like the height of ListView is defined by its parent which is Container. So I expect ListView to have a height of 200. Then the height of Card should be defined by its parent container which gives a height of 50. However Card instead takes a height of 200...
Usually, a ListView widget tries to fill all the available space given by the parent element, even when the list items would require less space. You can disable this feature using shrinkWrap parameter of ListView as follow:\
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _recommendations.length,
shrinkWrap:true,
itemBuilder: (context, index) {
return Container(
width: 150,
height: 100,
child: Card(
color: Colors.blue,
child: Center(
child: Text(_recommendations[index])
)
)
);
}
)
I'm trying to populate a ListView with Image.file widgets using Image Picker.
I tried setting cacheExtent to 9999. but it doesn't make a difference, this behavior doesn't occur in CachedNetworkImage, but sadly this is a file image so is there a way to replicate said behavior?
Sample Code:
GridView.builder(
cacheExtent: 9999,
padding: const EdgeInsets.symmetric(vertical: 16.0),
scrollDirection: Axis.horizontal,
itemCount: images.length,
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
mainAxisSpacing: 10.0,
),
itemBuilder: (BuildContext context, int index) {
final image = images[index];
return LayoutBuilder(builder: (context, constraints) {
print(constraints);
return (image != null)
? ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Image.file(
File(image.path),
fit: BoxFit.cover,
cacheWidth: constraints.biggest.width.ceil(),
cacheHeight: constraints.biggest.height.ceil(),
),
)
: const SizedBox.shrink();
},
),
When i use cacheWidth and cacheHeight it makes the loaded images pixelated and they never load in full quality
EDIT: it turned out to be because the loaded files were larger than needed, even though i used ImagePicker to compress their quality to 25%
As #pskink instructed, i set the cacheWidth property to the following:
cacheWidth: constraints.biggest.width.ceil() * MediaQueryData.devicePixelRatio
Can you try update this code ?
Image.file(File(image.path), cacheHeight: 80, cacheWidth: 80,);
I am using flutter_swiper package in my app. I have following code:
Container(
height: size.getSizePx(200),
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return Align(
alignment: Alignment.topLeft,
child: Container(
height: size.getSizePx(200),
child: Image.network(imageList[index].thumb),
),
);
},
itemCount: imageList.length,
),
)
Image size that comes server is normally 370x276
Problem
Swiper works very well, but space between two images is very big. Is there any how I can control the spaces between Swiper slides (images)?
Thanks