Home > Back-end >  Flutter Shadow appearing around Divider's line in ListView
Flutter Shadow appearing around Divider's line in ListView

Time:10-18

I used ListView.separated to reproduce the Twitter's homepage, with a Divider as separator. My items are white Containers, and it's weird because we see a kind of shadow around the Divider, or like its box. Have you faced this?

Here the divider: enter image description here

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:
          SafeArea(
            child:
              ListView.separated(
                itemCount: 3,
                itemBuilder: (context, index) {
                  return PlaceCard(place: place1);
                  },
                separatorBuilder: (context, index) {
                  return Divider(thickness: 0);
                  },
              )
          )
    );
  }
}
class PlaceCard extends StatelessWidget {
  final Place place;

  const PlaceCard({Key? key, required this.place}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        height: 400,
    );
  }
}

CodePudding user response:

The reason you see that is that the height of your Divider and Scaffold background color. If you set Scaffold's background color to white or play with Divider height parameter it would disappear. Like this:

Scaffold(
    backgroundColor: Colors.white, // <--- add this
    body: SafeArea(
      ...
    )
)

or instead of set thickness to 0 set height to 0:

Divider(height: 0);
  • Related