I am trying to get the CachedNetworkImage to a bigger size than the one in the picture. I tried setting and resetting the heights of all the widgets, but I was not able to make it bigger. Can someone please, help.
This is the ModalBottomSheet code that includes the image:
void showModal(
BuildContext ctx,
String proId,
String name,
String productDescription,
num price,
List<dynamic> img,
num stockCount,
String outId,
String merId
) {
final cartData = Provider.of<CartData>(ctx, listen: false);
showModalBottomSheet<void>(
isScrollControlled: true,
backgroundColor: Colors.white70.withOpacity(0.8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
context: ctx,
builder: (BuildContext context) {
return
// Container(
// //height: 650,
// child:
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Column(
children: [
Text(
name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
softWrap: true,
overflow: TextOverflow.fade,
),
SizedBox(height: 10),
Container(
alignment: Alignment.center,
//height: 500,
// height: MediaQuery
// .of(context)
// .size
// .height,
child: CarouselSlider(
items: img.map<Widget>((item) =>
Container(
padding: const EdgeInsets.all(3),
child: InkWell(
onTap: () {
Navigator.of(
context).push(MaterialPageRoute(builder: (_) =>
FullScreenImage(
image: item
//Image.network(item, fit: BoxFit.contain)
)));
},
child: CachedNetworkImage(
imageUrl: "$item",
//height: 500,//MediaQuery.of(context).size.height,
// width: MediaQuery.of(context).size.width*.7,
fit: BoxFit.cover,
)),
)
)
.toList(),
options: CarouselOptions(
enableInfiniteScroll: false,
initialPage: 0,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 4),
autoPlayAnimationDuration:
const Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
viewportFraction: 1
),
)
),
Container(
//height: 200,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Text(
productDescription,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15,
),
softWrap: true,
overflow: TextOverflow.fade,
),)),
SizedBox(height: 10),
],
),
//flex: 8,
),
Column(
children: [
Align(
alignment: Alignment.bottomRight,
child: Text(
"₮ ${NumberFormat.decimalPattern().format(price)}",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 17,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
CartCounter(stockCount),
Expanded(
flex: 2,
child: ElevatedButton.icon(
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(13),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
color3,
),
),
onPressed: () {
Navigator.of(context).pop();
cartData.addToCart(
ctx: ctx,
productId: proId,
price: price,
productName: name,
countInStock: stockCount,
qty: CartCounter.qty,
img: img,
outletID: outId,
merchId: merId
);
},
icon: const Icon(Icons.add_shopping_cart_rounded),
label: Text(Languages.of(context)!.addToBasket),
),
),
],
),
],
)
],
),
// ),
);
},
);
I got so confused. I tried different configurations, at some point I had cropped images with all the empty space around... help appreciated very much! Thanks in advance!
CodePudding user response：
In the options of the carousel there is the aspectRatio property, which controls the size of the items, just change it to a value close to what you like in the example, the default value is 16/9. With this, the area of the carousel item will be larger, you can define custom values for the image, as long as it respects the size of the carousel container.
options: CarouselOptions(
aspectRatio: 1,
enableInfiniteScroll: false,
initialPage: 0,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 4),
autoPlayAnimationDuration:
const Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
viewportFraction: 1),
CodePudding user response：
It looks like you're not resizing the size of the Image being built by CachedNetworkImage. You can do so by doing using the imageBuilder parameter of CachedNetworkImage:
CachedNetworkImage(
imageUrl: imageURL,
imageBuilder: (context, imageProvider) => ClipRRect(
borderRadius: BorderRadius.circular(2),
child: Image(
image: imageProvider,
height: Height can be set but I prefer not to so the original aspect ratio of the image is kept,
width: WIDTHHERE,
),
),
placeholder: (context, url) =>
const Center(child: CircularProgressIndicator()),
)