Draggable Scrollable sheet and stack in flutter

I have a problem when the DraggableScrollableSheet scroll this row of squares appears over it and I want this row positioned between the scaffold and the DraggableScrollableSheet this is the design I want to do

this is the problem

here is my code

Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        fit: StackFit.expand,
        alignment: Alignment.center,
        children: [
          DraggableScrollableSheet(
            initialChildSize: 0.6,
              minChildSize: 0.6,
              builder: (BuildContext context, ScrollController scrollController){
                return Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight:Radius.circular(20))
                  ),
                  child: SingleChildScrollView(
                    controller: scrollController,
                    child: Column(
                      children: [],
                    ),
                  ),
                );
              }
          ),
          Positioned(
            top: 255,
            child: Row(
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.grey,
                ),
                SizedBox(width: 20,),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                SizedBox(width: 20,),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.amber,
                ),
              ],
            ),
          ),

        ],
      )
    );