sliding_up_panel icon indicating copy to clipboard operation
sliding_up_panel copied to clipboard

When I scroll down the list in open panel (since, there is a list in the open panel state), instead of just scrolling the list down, the panel also closes.

Open saksham-gt opened this issue 4 years ago • 10 comments

Describe the bug I used SlideUpPanel() to make a transition from collapsed to isPanelOpen mode, but since isPanelOpen mode contains an CustomScrollView and hence AppBar and body, the body contains a list, so there is no issue when I open the panel and scroll down (i.e towards the bottom of list), but as I scroll up (towards AppBar/ top of the list), the panel collapses along with list being scrolled up, if the list is little bit long, then the panel will collapse before the list reaches its top, hence is very irritating.

To Reproduce Steps to reproduce the behavior:

In panelBuilder: include a ListView of say 50 itemCount, and scroll to the bottom of the list, then scroll Up towards top of the list, the panel will collapse along with list being scrolled

Expected behavior I expect the panel to not collapse the screen until top of the list is reached.

Smartphone (please complete the following information):

  • Device: [e.g. Nokia 4.2]
  • OS: [e.g. iOS8.1]
  • Flutter Version [e.g. 2.2]
  • sliding_up_panel Version [e.g. ^2.0.0+1]

Sample main.dart Please provide a sample main.dart that reproduces this issue. The code provided here should be able to be run on its own without any external dependencies.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.teal[800],
      ),
      home: SlideUpScreen(),
    );
  }
}

class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slide up panel'),
      ),
    );
  }
}

class SlideUpScreen extends StatelessWidget {
  final PanelController _pc = PanelController();

  final String imgNet =
      'https://1.bp.blogspot.com/-DDfhSEHLOGY/W3E2QCUpnkI/AAAAAAAACgw/pUTISwS2sOwH2RwbY6kslorz6C6epSYbACLcBGAs/s1600/Slide13.JPG';

  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height);

    return Material(
        child: SlidingUpPanel(
      controller: _pc,
      maxHeight: MediaQuery.of(context).size.height * 0.98,
      minHeight: MediaQuery.of(context).size.height / 4.54,
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(8),
      ),
      backdropEnabled: true,
      panelBuilder: (sc) {
        return CustomScrollView(
          slivers: [
            SliverAppBar(
              pinned: true,
              expandedHeight: 200,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Counting with Parking'),
                background: DecoratedBox(
                  position: DecorationPosition.foreground,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(8),
                    ),
                    gradient: LinearGradient(
                        colors: [Colors.teal[800]!, Colors.transparent],
                        begin: Alignment.bottomCenter,
                        end: Alignment.center),
                  ),
                  child: Image.network(
                    imgNet,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate((ctx, index) {
                return ListTile(
                  leading: Icon(Icons.construction),
                  title: Text('${index + 1}'),
                );
              }, childCount: 20),
            )
          ],
        );
      },
      onPanelOpened: () => {_pc.open()},
      collapsed: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.vertical(
            top: Radius.circular(8),
          ),
          color: Colors.teal[800]!,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(
              constraints: BoxConstraints(
                maxHeight: 200,
                maxWidth: 175,
                minWidth: 75,
              ),
              margin: EdgeInsets.only(left: 10),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.network(
                  imgNet,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SizedBox(
              height: 200,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    SizedBox(
                      height: 15,
                    ),
                    Text(
                      'Building office',
                      style: TextStyle(
                        color: Colors.blueGrey[50],
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Text(
                      'Hours: Open',
                      style: TextStyle(
                        color: Colors.blueGrey[50],
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Text(
                      '8am - 11 pm',
                      style: TextStyle(
                        color: Colors.blueGrey[50],
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    SizedBox(
                      height: 7,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      body: Scaffold(
          appBar: AppBar(
            title: Text("SlidingUpPanelExample"),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Row(
                  children: [
                    TextButton(
                      onPressed: () => _pc.show(),
                      child: Text('Show Panel'),
                    ),
                    TextButton(
                      onPressed: () => _pc.hide(),
                      child: Text('Hide Panel'),
                    ),
                  ],
                ),
                Row(
                  children: [
                    TextButton(
                      onPressed: () {
                        _pc.open();
                      },
                      child: Text('Open Panel'),
                    ),
                    TextButton(
                      onPressed: () => _pc.close(),
                      child: Text('Close Panel'),
                    ),
                  ],
                ),
              ],
            ),
          )),
    ));
  }
}

saksham-gt avatar May 23 '21 02:05 saksham-gt

@sudo-saksham did you find any solution?

shahmirzali49 avatar Aug 08 '21 16:08 shahmirzali49

nope.

saksham-gt avatar Aug 11 '21 14:08 saksham-gt

do you find any solution ?

Harsh4598 avatar Aug 30 '21 03:08 Harsh4598

@sudo-saksham

Harsh4598 avatar Aug 30 '21 03:08 Harsh4598

no. @Harsh4598

saksham-gt avatar Aug 30 '21 04:08 saksham-gt

Hey, try to pass ScrollController from panel into your SingleChildScrollView.

From example panelBuilder: (scrollController) => _panel(scrollController),

_panel(ScrollController sc) => SingleChildScrollView( controller: sc, ....

kurtiev avatar Sep 24 '21 06:09 kurtiev

@kurtiev thanks... it does work! I had a listView inside that panel and in its controller property i passed the Panels controller. Now when I scroll down it only shuts after the list hits the end and cant scroll any further. but it would be nice to know whats the logic behind that.

After you pass the Panel's scrollcontroller to the ListView what really happens... does the panels scrollcontroller not kick in untill the list hits the end???

YohanWadia avatar Nov 09 '21 12:11 YohanWadia

The issue for two different list view in slidup panel when i scroll down towards to the bottom the panel will close ....

appdeveploment avatar Feb 10 '22 04:02 appdeveploment

Use the scroll contro. It will help you .

On Wed, Feb 9, 2022 at 11:57 PM cc-appdev @.***> wrote:

The issue for two different list view in slidup panel when i scroll down towards to the bottom the panel will close ....

— Reply to this email directly, view it on GitHub https://github.com/akshathjain/sliding_up_panel/issues/252#issuecomment-1034493984, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKS5VKJWECAQU4SXGKRVY7LU2NAVJANCNFSM45LG5WPQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

-- Sent from Gmail Mobile

Harsh4598 avatar Feb 10 '22 10:02 Harsh4598

ScrollController

@kurtiev @YohanWadia @appdeveploment @Harsh4598 how to pass the scrollontroller , I don't get it panel builder accepts no arguments

thorizer avatar Nov 24 '22 12:11 thorizer