21

When I create a Container with box shadow inside a ListView (scrolls Horizontally), the shadow looks fine, but, when I add multiple Containers inside the ListView, their shadows(just shadows, not Container) gets cropped at top and bottom.

Please also note that this whole ListView is wrapped under a parent Container.

I tried to increase the height of Parent Container(in which the whole ListView is wrapped), but it increases the height of child Container with its shadow still cropped.

I also tried to give padding to Parent Container but, it still shadow still gets cropped.

Maybe I need to wrap the ListView inside any other Widget which can get the job done without the problem.

Container(
  // padding: EdgeInsets.only(left: 30.0, right: 0.0),
  height: 140.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        height: 140.0,
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              offset: Offset.zero,
              blurRadius: 10.0,
              spreadRadius: 0.0,
            )
          ],
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child: Image.asset(
                  'assets/images/leather_boot.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 30.0, bottom: 30.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'BadAss Genuine',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Leather Boots',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.5,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        height: 140.0,
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              offset: Offset.zero,
              blurRadius: 10.0,
              spreadRadius: 0.0,
            )
          ],
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child: Image.asset(
                  'assets/images/leather_boot.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 30.0, bottom: 30.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'BadAss Genuine',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Leather Boots',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.5,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
    ],
  ),
),

I expect the ListView to have Containers(as custom Cards) to have proper BoxShadow, but in the actual output, Containers' BoxShadow gets cropped from both Top & Bottom.

Improve this question

4 Answers 4

Reset to default
58

As @Zahra wrote,

adding clipBehavior: Clip.none, to the ListView, solved the problem.

The crop happens only when your widgets exceed the screen size

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

8

Okay I found the solution myself.

Steps to fix the problem

  1. Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.

  2. Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.

  3. Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).

  4. Now give padding to your ListView of 10.0 on both top & bottom.

  5. Problem Solved (Silly Me).

Sample Code here

Container(
  height: 160.0,
  child: ListView(
    padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      SizedBox(
        width: 30.0,
      ),
      Container(
        width: 340.0,
        // height: 140.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 10.0,
              color: Colors.black12,
            )
          ],
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child: Image.asset(
                  'assets/images/leather_boot.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 20.0, bottom: 20.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'BadAss Genuine',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Leather Boots',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.0,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                                      SizedBox(
                    height: 12.0,
                  ),
                  Row(
                    children: <Widget>[
                      SizedBox(
                        width: 110.0,
                      ),
                      Container(
                        height: 30.0,
                        width: 30.0,
                        child: Image.asset(
                            'assets/images/boot.png'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        // height: 140.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 10.0,
              color: Colors.black12,
            )
          ],
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child:
                  Image.asset('assets/images/gloves.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 20.0, bottom: 20.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Highly Durable',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Riding Gloves',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.0,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Row(
                    children: <Widget>[
                      SizedBox(
                        width: 110.0,
                      ),
                      Container(
                        height: 30.0,
                        width: 30.0,
                        child: Image.asset(
                            'assets/images/glove.png'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        // height: 140.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 10.0,
              color: Colors.black12,
            )
          ],
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child:
                  Image.asset('assets/images/helmet.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 20.0, bottom: 20.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'German Hat',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Riding Helmet',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.0,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Row(
                    children: <Widget>[
                      SizedBox(
                        width: 110.0,
                      ),
                      Container(
                        height: 30.0,
                        width: 30.0,
                        child: Image.asset(
                            'assets/images/helmeticon.png'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
    ],
  ),
),
Improve this answer

2 Comments

This will end up in more gap between the ListView and other widgets in the same Column or Row.
You can use the clip option inside a listView by setting clip to none : clipBehavior: Clip.none
0

In my case, the clip Behavior property helped to display shadows. However, this property created big problems: ListView elements began to run over neighboring widgets when scrolling.

I think to solve the problem it is more correct to wrap the list items (widgets with shadows) in a Container with the margin property. This property is created for this purpose. Set the value of the property to the size of the shadow.

Container(
  margin: const EdgeInsets.symmetric(horizontal: 2.0),
  child: MyListViewElement ...
Improve this answer

Comments

0

add these two attributes to solve the issue

screenshotController
        .captureFromWidget(
      screenShotWidet(),
      delay: const Duration(milliseconds: 100), // for fetching 
      targetSize: const Size(800, 10000), // this should be max to sycn
    )
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.