Flutter move container from bottom to top

Question

I am using Google map API and I need to show some containers on google Maps with some TextFormField. The issue I am facing is that I need to scroll the container on top of the google map. That is, when the user moves the container from bottom to top, only then will the container come on top like this.

My code

Stack(children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: GoogleMap(
                  markers: Set<Marker>.of(_markers.values),
                  onMapCreated: _onMapCreated,
                  initialCameraPosition: CameraPosition(
                    target: currentPostion,
                    zoom: 18.0,
                  ),
                  myLocationEnabled: true,
                  onCameraMove: (CameraPosition position) {
                    if (_markers.length > 0) {
                      MarkerId markerId = MarkerId(_markerIdVal());
                      Marker marker = _markers[markerId];
                      Marker updatedMarker = marker.copyWith(
                        positionParam: position.target,
                      );

                      setState(() {
                        _markers[markerId] = updatedMarker;
                      });
                    }
                  },
                ),
              ),
              Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 8, right: 8),
                    child: Container(
                      color: Colors.white,
                      height: 300,
                      child: SingleChildScrollView(
                        child: Form(
                          key: _formKey,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              //TextForm here code is large thats why
                            ],
                          ),
                        ),
                      ),
                    ),
                  ))
            ])

I am just using Stack. In Stack, I have google map and containers. In the container, I have a column that has TextFields and a button. How I make the container overlap the map when I scroll? Right now it scrolls inside the container but I need a container that will scroll on a map like an overflow.

Solution 1

Just use a DraggableScrollablesheet. This is a sample:

DraggableScrollableSheet(
  initialChildSize: 0.2,
  minChildSize: 0.2,
  maxChildSize: 0.8,
  builder: (BuildContext context, ScrollController scrollController) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.blue,
        // border: Border.all(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
      ),
      child: Scrollbar(
        child: ListView.builder(
          controller: scrollController,
          itemCount: 25,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: const Icon(Icons.ac_unit),
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  },
);

I really hope that helped you out! :)

Solution 2

Indeed you can use DraggableScrollablesheet as suggested by @Mesota22. Using the above sample code, you can put it in a Stack with the GoogleMap widget.

 Stack(
    children: [
       GoogleMap( 
          //Widget properties
        ),
       DraggableScrollableSheet( 
         //Mesota22 sample code
         )
       ]
     ),

Here's the output: