ListView.builder is not overlapping in Stack in Flutter

Issue

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

Solution

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

Answered By - Yeasin Sheikh