Flutter - Scroll with a fixed widget

Question

I would like to do a scroll that the map part fixed on top, once i scroll up those widget can be overlay on top of the map.

i tried to do the scroll effect. i use a stack with one container(the map) and one SingleChildScroll. but the map is not able to tap after i put the SingleChildScroll on top of the map.

So is there any ways to made this out? Any suggestions that i can do this design? Thanks a lot!

This is the normal view

after i scroll up little bit

here is the code

return Scaffold(
  key: _scaffoldKey,
  backgroundColor: ThemeColors.orangeYellow,
  floatingActionButton: Padding(
    padding: EdgeInsets.only(right: 30),
    child: Row(
      children: [
        _profileButton,
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
 
  body: Stack(
    children: [
      Positioned(
        top: 0,
        child: Stack(
          alignment: Alignment.bottomCenter,
          overflow: Overflow.visible,
          children: <Widget>[
            Container(),
            _map,
            _nearbyRestaurantBox,
            _getCurrentLocationButton,
          ],
        ),
      ),
      SingleChildScrollView(
        physics: ClampingScrollPhysics(),
        child: Column(
          children: <Widget>[
            Column(
              // alignment: Alignment.bottomCenter,
              // overflow: Overflow.visible,
              children: <Widget>[
                // Container(),
                // _map,
                Padding(
                  padding: EdgeInsets.only(top: _mapHeight - 70),
                ),
                Stack(
                  children: [
                    Column(
                      children: [
                        SizedBox(
                          height: 70,
                          // child: Container(
                          //     // color: Colors.green,
                          //     ),
                        ),
                        SizedBox(
                          height: 70,
                          child: Container(
                            color: Colors.amber,
                          ),
                        )
                      ],
                    ),

                    // Padding(
                    //   padding: EdgeInsets.only(top: 35),
                    // ),
                    Container(
                      alignment: Alignment.center,
                      child: Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: _searchBox,
                      ),
                    )
                  ],
                ),
                // Positioned(top: 0, child: _map),
                // _searchBox,
                // _nearbyRestaurantBox,
                // _getCurrentLocationButton,
              ],
            ),
            Container(
              color: ThemeColors.orangeYellow,
              child: Center(
                child: Column(
                  children: <Widget>[
                    _categoryBox,
                    ..._buildBanners(),
                  ],
                ),
              ),
            ),
          ],
        ),
      )
    ],
  ),
);

question from:https://stackoverflow.com/questions/65920492/flutter-scroll-with-a-fixed-widget

Answer 1

Waitting for answers