Question 239523 in CSS Question posted in
Some basic documentation can be found here.

Css – how to give this type of shadow of a container in flutter?

I have a Simple screen with GridView.builder with crossAxisCount: 3, and in the itemBuilder I am returning Container with little shadow left, right, and bottom, but failed to achieve what I want.

image of current result

image of the result I want

GridView.builder(
  padding: EdgeInsets.symmetric(horizontal: 15),
  scrollDirection: Axis.vertical,
  physics: BouncingScrollPhysics(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 15,
    mainAxisSpacing: 20,
    childAspectRatio: 2 / 3.3,
  ),
  primary: false,
  shrinkWrap: true,
  itemCount: 100,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 5,
            offset: Offset(1, 1)),
        ]),
    );
  },
),
Tags:

2

Answers


  1. 0

    I believe I achieved what you are looking for based on the image you have provided by using a Card widget with elevation instead of a boxshadow. I also decreased the crossAxisSpacing a little to match the picture even more.

    GridView.builder(
    padding: EdgeInsets.symmetric(horizontal: 15),
    scrollDirection: Axis.vertical,
    physics: BouncingScrollPhysics(),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      mainAxisSpacing: 20,
      childAspectRatio: 2 / 3.3,
    ),
    primary: false,
    shrinkWrap: true,
    itemCount: 100,
    itemBuilder: (context, index) {
      return Card(
        elevation: 5,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      );
    },
  ),
    Login or Signup to reply.
  2. 0

    In your code you have given more blurradius and spread radius, just reduce it.Try this and adjust your blur and spread radius according to your view.

        BoxShadow(
                  color: Colors.black12,
                  blurRadius: 2,
                  spreadRadius: 2,
                  offset: Offset(0, 0)),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search