I want to create a scrollable stack List item with each item falling to toward the screen

Question

I am trying to create this scrollable stacked list: below is the image. desired result.

When i increase the item count, the listed items get disfigured, i would appreciate if any one could help me with it. result when itemCount is increased

return Expanded(
      child: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
              child: Container(
                padding: P_ALL,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: Stack(children: [
                  ...List.generate(10, (index) {
                    return Positioned(
                      top: index * 70.0,
                      left: 0,
                      right: 0,
                      height: 100.0,
                      child: Transform(
                        alignment: Alignment.center,
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.0015)
                          ..rotateX(.6),
                        child: InkWell(
                          onTap: () => print(index),
                          child: Container(
                            alignment: Alignment.topCenter,
                            width: MediaQuery.of(context).size.width,
                            height: 100.0,
                            decoration: BoxDecoration(
                                color: appRedColor,
                                boxShadow: [BoxShadow(spreadRadius: .2, blurRadius: 1.0, color: Colors.white)],
                                borderRadius: BorderRadius.circular(9.0),
                                image: DecorationImage(
                                  image: NetworkImage(restaurantImages),
                                  fit: BoxFit.cover,
                                )),
                            child: Padding(
                              padding: const EdgeInsets.only(top: 26.0),
                              child: Text('Fast Food',
                                  style: customFont(
                                    size: 20.0,
                                    color: Colors.white,
                                    weight: FontWeight.bold,
                                  )),
                            ),
                          ),
                        ),
                      ),
                    );
                  }),
                ]),
              ),
            ),
          ),
        ],
      ),
    );

Answer 1

First of all, remove the two Expanded widgets from your tree as those are not needed here, instead they are causing exceptions like "Incorrect use of widgets".

Secondly change the right and left values of the Positioned widget to something greater than 0 (zero), like 6, and you'll be good to go.

Column(
        children: [
          SingleChildScrollView(
            keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Stack(
                children: [
                  ...List.generate(
                    10,
                    (index) {
                      return Positioned(
                        top: index * 70.0,
                        left: 6,
                        right: 6,
                        height: 100.0,
                        child: Transform(
                          alignment: Alignment.center,
                          transform: Matrix4.identity()
                            ..setEntry(3, 2, 0.0015)
                            ..rotateX(.6),
                          child: InkWell(
                            onTap: () => print(index),
                            child: Container(
                              alignment: Alignment.topCenter,
                              width: MediaQuery.of(context).size.width,
                              height: 100.0,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                boxShadow: const [
                                  BoxShadow(
                                      spreadRadius: .2,
                                      blurRadius: 1.0,
                                      color: Colors.white)
                                ],
                                borderRadius: BorderRadius.circular(9.0),
                                image: const DecorationImage(
                                  image: NetworkImage(""),
                                  fit: BoxFit.cover,
                                ),
                              ),
                              child: const Padding(
                                padding: EdgeInsets.only(top: 26.0),
                                child: Text(
                                  'Fast Food',
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

Snapshot:

• Hope that answered your question and solved the problem.