Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Body not scrolling to bottom #289

Open
elvisgn opened this issue Jan 24, 2022 · 4 comments · May be fixed by #303
Open

Body not scrolling to bottom #289

elvisgn opened this issue Jan 24, 2022 · 4 comments · May be fixed by #303

Comments

@elvisgn
Copy link

elvisgn commented Jan 24, 2022

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
github

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
Copy link

Same issue here!

@qixotic
Copy link

qixotic commented May 9, 2022

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
Copy link

can the author please check the pull request? Thanks.

@qixotic
Copy link

qixotic commented Jun 20, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants