over lay a widget in a Stack and change its visibility n button click

Question

I have several widgets as children of Stack widget.I want to add a OffstageWidget/ Visible to the stack and make it visible and invisible from button clicks.The widget should appear above the maps and be height:50

main challenge is that when i use positioned to place the widget its still visible.

    body: Stack(children: <Widget>[
        Positioned.fill(
          //if map is empty show empty const loc copsonroad https://stackoverflow.com/a/56227535/10409567
          child: GoogleMap(
            myLocationEnabled: true,
            mapType: MapType.normal,
            onMapCreated: (GoogleMapController controller) async {
              _currentLocation();
              _controller.complete(controller);
            },
            polylines: Set<Polyline>.of(_mapPolylines.values),
            compassEnabled: true,
            myLocationButtonEnabled: true,
            initialCameraPosition: CameraPosition(

              target: LatLng(
                  latitude_current ?? -4.0428, longitude_current ?? 39.6725),
              zoom: 16.0,
            ),
          ),
        ),
...

the widget i want to add

 Offstage(offstage:false,
                  child: Container(
                    height: 50,
                    child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
                        Text(widget.distance),
                        Text(widget.time)
                    ],),
                  ),),

Answer 1

Here is my implementation, click on FAB button to show hide to label

Completer<GoogleMapController> _controller = Completer();
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  bool visible = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation Demo'),
      ),
      body: Stack(
        children: <Widget>[
      GoogleMap(
        myLocationEnabled: true,
        mapType: MapType.normal,
        onMapCreated: (GoogleMapController controller) async {
          _controller.complete(controller);
        },
        compassEnabled: true,
        myLocationButtonEnabled: true,
        initialCameraPosition: _kGooglePlex,
      ),
      Visibility(
        visible: visible,
        child: Container(
          color: Colors.lime,
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text('45'),
              Text('10'),
            ],
          ),
        ),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      setState(() {
        visible = !visible;
      });
    },
  ),
);
  }

Answer 2

You can use the AnimatedOpacity widget for this.

body: Stack(children: <Widget>[
        AnimatedOpacity(
          opacity: opacityLevel,// maintain this as state variable
          duration: Duration(seconds: 3),
          child: Positioned.fill(
          //if map is empty show empty const loc copsonroad https://stackoverflow.com/a/56227535/1040956
          child: GoogleMap(
            myLocationEnabled: true,
            mapType: MapType.normal,
            onMapCreated: (GoogleMapController controller) async {
              _currentLocation();
              _controller.complete(controller);
            },
            polylines: Set<Polyline>.of(_mapPolylines.values),
            compassEnabled: true,
            myLocationButtonEnabled: true,
            initialCameraPosition: CameraPosition(

              target: LatLng(
                  latitude_current ?? -4.0428, longitude_current ?? 39.6725),
              zoom: 16.0,
            ),
          ),
        ),
        ),

For more info on this see the official doc & example here https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html