在其他小部件上飘动阴影

Question

. Answers to this question are eligible for a +100 reputation bounty. Ruudy wants to to this question.

My base widget is a Column. The first element is a Container which has a BoxShadow. The second element is a ListView which builds several Card, depending on the context. If the scroll is 0 the shadow gets displayed. However when start scrolling, the card is "over" the shadow (higher z-index) and hides it.

The shadow should stay always on top, over the Cards. How is this done?

Answer 1

Code would be really helpful to solve that. But I have an idea what problem you are facing and how it can be solved.

Try to use Stack instead of Column , because Column take the whole space of the screen. Thus it's overlapping the shadow. Stack will help you to show the Container above your ListView . Also use Positioned . Your ListView needs an offset from the top ListItem otherwise it will be covered by the Container and can't be touched anymore.

Stack(
  children: <Widget>[
    Padding(
      //padding
      child: //Listview (can also be wrapped in "Positioned")
    ),
    Positioned(
      top: 0.0, //Container at the top, ListView needs an additional offset from top, otherwise it will be covered by Container
      left: 0.0,
      right: 0.0,
      child: Container(
        decoration: BoxDecoration(
          color: //put some color
          boxShadow: [
            BoxShadow(
              color: //put some color
              offset: Offset(0, 10), //offset
              // also can do some blur etc.
          )]
        ),
        child: ListTile(
          title: //choose your title
        )
     ),
    ),
  ]
)

Answer 2

将这个上部框包裹在Material小部件中并提供一个高度。