CODEWITHSUNDEEP
flutterdartflutter-layout
FEIGNED GANGER
FEIGNED GANGER

Reputation: 41

ListView.builder is not overlapping in Stack in Flutter

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

enter image description here

what I am expecting

enter image description here

Upvotes: 0

Views: 832

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63569

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

Upvotes: 3

Related Questions