Body not scrolling to bottom

[elvisgn]

Describe the bug See attached gif first. On Android, the main SlidingUpPanel body is not 100% scrollable to the bottom. In the attached gif, there is a list of rows numbered 1 to 9 (set repeated twice). The list only scrolls till the 2nd number 7. On some emulators, it scrolls till 8, but not consistently to bottom.

To Reproduce

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class PanelScreen extends StatefulWidget {
  PanelScreen() : super();

  @override
  _PanelScreenState createState() => _PanelScreenState();
}

class _PanelScreenState extends State<PanelScreen> with RouteAware {
  double _panelHeightOpen = 400;
  PanelController _pc = new PanelController();
  late ScrollController _sc;

  @override
  void dispose() {
    _sc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: SlidingUpPanel(
        maxHeight: _panelHeightOpen,
        minHeight: 0,
        defaultPanelState: PanelState.CLOSED,
        snapPoint: 0.6,
        isDraggable: true,
        backdropEnabled: true,
        controller: _pc,
        panelBuilder: (sc) {
          _sc = sc;
          return Container();
        },
        body: ListView(
          children: [
            Container(
                child: Text('1'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade100),
            Container(
                child: Text('2'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade200),
            Container(
                child: Text('3'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade300),
            Container(
                child: Text('4'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade400),
            Container(
                child: Text('5'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade500),
            Container(
                child: Text('6'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade600),
            Container(
                child: Text('7'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade700),
            Container(
                child: Text('8'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade800),
            Container(
                child: Text('9'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade900),
            Container(
                child: Text('1'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade100),
            Container(
                child: Text('2'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade200),
            Container(
                child: Text('3'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade300),
            Container(
                child: Text('4'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade400),
            Container(
                child: Text('5'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade500),
            Container(
                child: Text('6'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade600),
            Container(
                child: Text('7'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade700),
            Container(
                child: Text('8'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade800),
            Container(
                child: Text('9'),
                height: 50,
                width: double.infinity,
                color: Colors.green.shade900),
          ],
        ),
      ),
    );
  }
}

Expected behavior In the above code, the list should scroll to the 9th green row (bottom most widget).

Screenshots

Additional context None

Smartphone (please complete the following information):

• Device: Pixel 4 API 29 Simulator, Flutter emulator
• OS: Android 10
• Flutter Version - 2.8.1
• sliding_up_panel Version - ^2.0.0+1

[kolioOtSofia]

Same issue here!

[qixotic]

I believe the problem is that the panel code wraps SlidingUpPanel.body in a Container with

  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,

making it fill the size of the screen. This would be ok if you didn't use an AppBar, or set extendBodyBehindAppBar: true on your Scaffold so that your body can go under the AppBar, but otherwise would have this issue.

I have a proposed fix in #303, but if you don't want to depend on a fork of this code, you could possibly hack around it as well by e.g. wrapping your widget with some Padding when also creating the AppBar:

SlidingUpPanel(
    body: Padding(
        padding: EdgeInsets.only(bottom: appBar.preferredSize.height + MediaQuery.of(context).viewPadding.top),
        child: MyRealBodyWidget(),
    )
    ...

[Dosenbiiir]

can the author please check the pull request? Thanks.

[qixotic]

FWIW, looks like this issue has affected many versions, with a few PRs attempting to fix it or otherwise related:

44 #64 #92 #129

Turns out 64/92 take the same core approach of passing in constraints via a LayoutBuilder.