flutter: size of cachednetworkimage in showbottommodal is too small

Question

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!

Answer 1

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),