GridView not listening to image size, or cross/MainAxisAlignment

Question

There are a few problems with my GridView, for starters it is not listening to sizes for the Image I have in each grid item, it is also not listening to the fact that I am telling the image to have rounded corners on topLeft and topRight, and it is not listening to the background color for the main container of each grid item. And if you see in the picture the product name (pi3) should be left aligned, same with the price (20.0).

Please check the 2nd picture for how I want this to look

Here is my code...

Scaffold(
          backgroundColor: Color(0xFFf8f9f8),
          body: SafeArea(
              child: GridView.count(
                primary: false,
                padding: const EdgeInsets.all(20),
                childAspectRatio: (itemWidth / itemHeight),
                crossAxisSpacing: 10,
                mainAxisSpacing: 20,
                crossAxisCount: 2,
                children: productsList,
              )
          ));

for (var product in products) {
      late String image;
      if (product["image"] == null) {
        image = backend + "/pm" + "/assets/images/null.png";
      } else {
        image = backend + "/pm" + product["image"];
      }
      productsList.add(
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(15)),
          ),
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15)),
                ),
                child: Image.network(
                  image,
                  height: 25.0,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(product["name"],
                      style: TextStyle(
                        color: Colors.black
                      )
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(product["selling"].toString(),
                              style: TextStyle(
                                color: color_bluepurple,
                                fontWeight: FontWeight.bold,
                              )),
                            Container(
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(15)),
                                    color: Color(0xFFf8f9f8),
                                ),
                                width: (inputWidth / 2 - 25) * 0.60,
                                child: Text(product["quantity"].toString() + " Packs",
                                  style: TextStyle(
                                    color: Colors.grey
                                  )),
                            )
                          ],
                        ),
                        GestureDetector(
                          onTap: () {
                            print("Product pressed");
                          },
                          child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(15)),
                                  color: Color(0xFFf5f4fe),
                                  border: Border.all(
                                    color: Color(0xFFc0b8f4),
                                    width: 1,
                                  )
                              ),
                              width: (inputWidth / 2 - 25) * 0.25,
                            child: Icon(Icons.open_in_browser, color: color_bluepurple)
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              )],
          ),
        ),
      );
    }

kbessemer · Answer

The problem was caused by the wrong method of rounding the corners of my image, now using a container with a background decoration. And the color property of my main container needed to be inside the decoration tag.

for (var product in products) {
        late String image;
        if (product["image"] == null) {
          image = backend + "/pm" + "/assets/images/null.png";
        } else {
          image = backend + "/pm" + product["image"];
        }
        productsList.add(
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(15)),
              color: Colors.white,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: size.width / 2,
                  height: 150,
                  decoration: BoxDecoration(
                          image: DecorationImage(
                              image: NetworkImage(
                                image,
                              ),
                              fit: BoxFit.cover
                          ),
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(15), topRight: Radius.circular(15)),
                        ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(product["name"],
                          style: TextStyle(
                              color: Colors.black
                          )
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text("₦" + product["selling"].toString(),
                                  style: TextStyle(
                                    color: color_bluepurple,
                                    fontWeight: FontWeight.bold,
                                  )),
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(15)),
                                  color: Color(0xFFf8f9f8),
                                ),
                                width: (inputWidth / 2 - 25) * 0.40,
                                child: Text(product["quantity"].toString() + " Packs",
                                    style: TextStyle(
                                        color: Colors.grey
                                    )),
                              )
                            ],
                          ),
                          SizedBox(width: 25),
                          GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => ViewProduct(product["name"], product["pk"], product["image"], product["quantity"], product["cost"], product["selling"], GetAccountData)
                              )
                              );
                            },
                            child: Container(
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(5)),
                                    color: Color(0xFFf5f4fe),
                                    border: Border.all(
                                      color: Color(0xFFc0b8f4),
                                      width: 1,
                                    )
                                ),
                                width: (inputWidth / 2 - 25) * 0.25,
                                child: Icon(Icons.open_in_browser, color: color_bluepurple)
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                )],
            ),
          ),
        );
      }

GridView not listening to image size, or cross/MainAxisAlignment

1 Answers