mcrovero / rubber

An elastic material bottom sheet implementation for Flutter.
BSD 2-Clause "Simplified" License
562 stars 88 forks source link

Overflow when adding anything to Header #24

Closed murphycrosby closed 5 years ago

murphycrosby commented 5 years ago

Describe the bug Trying to have the RubberBottomSheet over GoogleMaps and allow the user to search. I can get the look needed, but everything seems to cause 'RenderFlex overflowed by 1.4 pixels on the bottom.' when moving Bottom sheet up and down...especially when using the header. I've tried using Stacks, ListViews, ClipRects, SingleChildScrollView, etc. However, always get an overflow.

To Reproduce

CameraPosition cam = _kInitialPos;
return Scaffold(
    appBar: AppBar(
      elevation: 0.0,
        title: Image.asset(
            "assets/Logo_white_med.png",
            fit: BoxFit.cover,
        ),
        backgroundColor: Theme.of(context).primaryColor,
    ),
    body: Container(
        child: RubberBottomSheet(
            scrollController: _scrollController,
            header: Container(
                width: MediaQuery.of(context).size.width,
                color: Theme.of(context).highlightColor,
                child: Icon(
                    FontAwesomeIcons.gripLines,
                    color: Theme.of(context).backgroundColor,
                ),
            ),
            lowerLayer: Container(
                child: GoogleMap(
                    mapType: MapType.normal,
                    initialCameraPosition: cam,
                    onMapCreated: (GoogleMapController controller) {
                        _mcontroller.complete(controller);
                    },
                    zoomGesturesEnabled: true,
                ),
            ),
            upperLayer: ListView(
                controller: _scrollController,
                children: <Widget>[
                    Text("Jimmy"),
                    Text("Ted"),
                    Text("Fred"),
                ],
            ),
            animationController: _controller,
        ),
    ),
);

Expected behavior Not overflow

Screenshots Example of what we are going for... image

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

murphycrosby commented 5 years ago

Had to not use the Header component, but put everything in a stack.

upperLayer: Stack(
  children: <Widget>[
    Container(
      height: 69.0,
      child: ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          itemCount: 1,
          itemBuilder: (BuildContext context, int index) {
            return _getHeaderLayer();
          }
      ),
    ),
    Transform.translate(
      offset: Offset(0, 69.0),
      child: _getUpperLayer(state),
    ),
  ]
),
mcrovero commented 5 years ago

Following your suggestion, It should be fixed now. The bottom sheet also accepts a new parameter called headerHeight, in the future I'll try to find a way to automatically detect the height of the header