title: over lay a widget in a Stack and change its visibility n button click
body: <p>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</p>
  
  <p>main challenge is that when i use positioned to place the widget its still visible.</p>
  
  <pre><code>    body: Stack(children: &lt;Widget&gt;[
          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&lt;Polyline&gt;.of(_mapPolylines.values),
              compassEnabled: true,
              myLocationButtonEnabled: true,
              initialCameraPosition: CameraPosition(
  
                target: LatLng(
                    latitude_current ?? -4.0428, longitude_current ?? 39.6725),
                zoom: 16.0,
              ),
            ),
          ),
  ...
  </code></pre>
  
  <p>the widget i want to add </p>
  
  <pre><code> Offstage(offstage:false,
                    child: Container(
                      height: 50,
                      child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: &lt;Widget&gt;[
                          Text(widget.distance),
                          Text(widget.time)
                      ],),
                    ),),
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nR2ws.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nR2ws.jpg" alt="as shown below"></a></p>