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?
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);