akshathjain / sliding_up_panel

A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!
https://pub.dartlang.org/packages/sliding_up_panel
Other
1.36k stars 379 forks source link

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. #252

Open saksham-gt opened 3 years ago

saksham-gt commented 3 years ago

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):

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'),
                    ),
                  ],
                ),
              ],
            ),
          )),
    ));
  }
}
shahmirzali49 commented 3 years ago

@sudo-saksham did you find any solution?

saksham-gt commented 3 years ago

nope.

Harsh4598 commented 3 years ago

do you find any solution ?

Harsh4598 commented 3 years ago

@sudo-saksham

saksham-gt commented 3 years ago

no. @Harsh4598

kurtiev commented 2 years ago

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

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

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

YohanWadia commented 2 years ago

@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???

appdeveploment commented 2 years ago

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

Harsh4598 commented 2 years ago

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

thorizer commented 1 year ago

ScrollController

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