fujidaiti / smooth_sheets

Sheet widgets with smooth motion and great flexibility.
https://pub.dev/packages/smooth_sheets
MIT License
194 stars 19 forks source link

Momentum scrolling continues despite press and hold in list view if items are clickable #190

Closed samuelkubinsky closed 1 month ago

samuelkubinsky commented 1 month ago

In the video you can see the sheet passing through tap gesture without stopping the scroll. I also included a fullscreen implementation to show how it should behave.

Versions: smooth_sheets: 0.8.1 go_router: 14.2.0

![Video]

Code ``` import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:smooth_sheets/smooth_sheets.dart'; void main() { runApp(MyApp()); } final transitionObserver = NavigationSheetTransitionObserver(); class MyApp extends StatelessWidget { MyApp({super.key}); final router = GoRouter( initialLocation: "/sheet", routes: [ ShellRoute( observers: [transitionObserver], builder: (context, state, child) { return NavigationSheet( transitionObserver: transitionObserver, child: Material( color: Theme.of(context).colorScheme.primary, borderRadius: BorderRadius.circular(16), clipBehavior: Clip.antiAlias, child: child, ), ); }, routes: [ GoRoute( path: "/sheet", pageBuilder: (context, state) { return ScrollableNavigationSheetPage( key: state.pageKey, initialExtent: const Extent.proportional(0.9), minExtent: const Extent.proportional(0.9), maxExtent: const Extent.proportional(0.9), child: PageBlue(), transitionsBuilder: (context, animation, secondaryAnimation, child) { final theme = Theme.of(context).pageTransitionsTheme; final route = ModalRoute.of(context) as PageRoute; return theme.buildTransitions(route, context, animation, secondaryAnimation, child); }, ); }, ), ], ), GoRoute( path: "/fullscreen", pageBuilder: (context, state) { return MaterialPage(child: PageGreen()); }, ) ], ); @override Widget build(BuildContext context) { return MaterialApp.router( routerConfig: router, title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), ); } } class PageBlue extends StatelessWidget { final List items = List.generate(50, (index) => "Item ${index + 1}"); PageBlue({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Sheet'), backgroundColor: Colors.blue, actions: [ TextButton( onPressed: () => context.go("/fullscreen"), child: const Text("to FullScreen"), ) ], ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return InkWell( onTap: () {}, child: ListTile( title: Text(items[index]), ), ); }, ), ); } } class PageGreen extends StatelessWidget { final List items = List.generate(50, (index) => "Item ${index + 1}"); PageGreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('FullScreen'), backgroundColor: Colors.green, actions: [ TextButton( onPressed: () => context.go("/sheet"), child: const Text("to Sheet"), ) ], ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return InkWell( onTap: () {}, child: ListTile( title: Text(items[index]), ), ); }, ), ); } } ```
samuelkubinsky commented 1 month ago

Update: "Stop tap" doesn't work only when tap occured on interactive widget.

fujidaiti commented 1 month ago

Thank you for reporting, and I was able to reproduce the problem with the provided code. I also found that this problem occurs not only with NavigationSheet but with ScrollableSheet as well. Here's a more minimal reproduction code:

Code ```dart import 'package:flutter/material.dart'; import 'package:smooth_sheets/smooth_sheets.dart'; void main() { runApp(const _App()); } class _App extends StatelessWidget { const _App(); @override Widget build(BuildContext context) { return const MaterialApp( home: Stack( children: [ Scaffold(), _MySheet(), ], ), ); } } class _MySheet extends StatelessWidget { const _MySheet(); @override Widget build(BuildContext context) { final content = ListView.builder( padding: EdgeInsets.zero, itemCount: 50, itemBuilder: (context, index) { return ListTile( title: Text('Item $index'), // If this is null, everything is fine. onTap: () {}, ); }, ); return ScrollableSheet( child: Material( color: Theme.of(context).colorScheme.secondaryContainer, child: content, ), ); } } ```

https://github.com/fujidaiti/smooth_sheets/assets/68946713/138e0f96-a970-46e9-90f8-0e6d25d050f1

fujidaiti commented 1 month ago

It seems like this bug has existed since v0.7.0 or v0.6.0. The above code works fine with v0.5.3.