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

Bug with Scrollable Elements in Sliding Pane #247

Open smakarov opened 3 years ago

smakarov commented 3 years ago

I'm trying to use 1)Header which takes all collapsed space. I don't use "collapsed" property, because i don't want some fade transitions of this element, and want it to be static. 2)List in panel space with example from manual

Here is project with simple code.

Or just main.dart ```dart 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( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } @immutable class MyHomePage extends StatelessWidget { const MyHomePage({ Key key, }) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("SlidingUpPanelExample"), ), bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.add), label: 'Mixes', ), BottomNavigationBarItem( icon: Icon(Icons.add), label: 'Sounds', ), BottomNavigationBarItem( icon: Icon(Icons.add), label: 'Settings', ), ], ), body: SlidingUpPanel( color: Color.fromRGBO(44, 38, 39, 1), borderRadius: BorderRadius.vertical(top: Radius.circular(16)), minHeight: 88, backdropEnabled: true, panelSnapping: true, defaultPanelState: PanelState.CLOSED, header: Container( width: MediaQuery.of(context).size.width, height: 88, child: Center( child: Text( "This is header", style: TextStyle( color: Colors.white, ), ), ), ), panelBuilder: (ScrollController sc) => _scrollingList(sc), body: Center( child: Text("This is the Widget behind the sliding panel"), ), ), ); } Widget _scrollingList(ScrollController sc) { return Padding( padding: const EdgeInsets.only(top: 88, left: 16, right: 16), child: ListView.builder( controller: sc, itemCount: 50, itemBuilder: (BuildContext context, int i) { return Center( child: Container( padding: const EdgeInsets.only(top: 12), child: Text( "$i", style: TextStyle( color: Colors.white, ), ), ), ); }, ), ); } } ```

When list wasn't scrolled, i can close panel by dragging header down but when list was scrolled i can't.

Alt text

P.S. Also when panel is in opened state and i drag up the header, ListView method(_scrollingList(sc)) calls again and again, which is not necessary i think.

annabronsky commented 3 years ago

Try to set SlidingUpPanel header to header: GestureDetector( onVerticalDragUpdate: (det) { if (det.primaryDelta! > 0.0) { print(det.primaryDelta); wifiResults_pc.close(); } }, child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: radius, ), padding: const EdgeInsets.only(top: 20, bottom: 20), width: MediaQuery.of(context).size.width, child: Text( 'Test header', textAlign: TextAlign.center, ), ), )

(where wifiResults_pc is panel controller) it helped me

anasmano commented 3 years ago

@akshathjain, Any workaround for this case ?