Flutter move container from bottom to top

user_12791644 0
Viewed 790

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.

enter image description here

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.

dart flutter google-maps
2 Answers

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! :)

user_149245560

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: enter image description here

user_96521690
Related