ListView.builder is not overlapping in Stack in Flutter - flutter

Question

I have been using ListView.builder in Stack. But the rounded containers are not overlapping each other. How can I overlap them? I have attached the code and screenshot of output as well.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Emniii extends StatelessWidget {
const Emniii({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 30,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(top: 10),
child: Center(
child: Stack(
children: [
ListView.builder(
itemCount: 13,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (_, index) {
return Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(15),
),
);
}),
],
),
),
),
);
}
}
Current Output
what I am expecting

Answer 1

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.
In your case you just want to generate 13 Containers, use loop or List.generate and use Positioned widget to align them.
I am using left: index * 15, it is shifting right by container's half width.
child: Stack(
children: [
...List.generate(
13,
(index) => Positioned(
left: index * 15,
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: index.isEven ? Colors.black : Colors.grey,
borderRadius: BorderRadius.circular(15),
),
),
),
),
],
),
More about ListView and Stack