flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
165.4k stars 27.29k forks source link

Multiple Pinned headers should work within a SliverMainAxisGroup #155758

Open letsar opened 2 weeks ago

letsar commented 2 weeks ago

Steps to reproduce

Put multiple PinnedHeaderSliver in a SliverMainAxisGroup widget

It looks like this issue is talking about the same use case, but it has been closed without further investigation.

Expected results

All the pinned widgets should be pinned to the top of the scroll view.

Actual results

Only the first pinned widget is pinned to the top of the scroll view.

Code sample

Code sample ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( appBar: AppBar( title: const Text('SliverMainAxisGroup pinned headers'), ), body: const CustomScrollView( slivers: [ SliverMainAxisGroup( slivers: [ _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.green, pinned: true), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.green, pinned: true), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.green, pinned: true), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), ], ), ], ), ), ); } } class _Sliver extends StatelessWidget { const _Sliver({ required this.color, required this.pinned, }); final Color color; final bool pinned; @override Widget build(BuildContext context) { final child = Container( height: 80, color: color, child: Padding( padding: const EdgeInsets.all(16), child: Center( child: Text( pinned ? 'Pinned' : 'Not pinned', style: const TextStyle(fontSize: 30), ), ), ), ); if (pinned) { return PinnedHeaderSliver(child: child); } else { return SliverToBoxAdapter(child: child); } } } ```

Screenshots or Video

Video demonstration https://github.com/user-attachments/assets/3a318000-d298-4f04-9a75-f97fc4190782

Logs

Logs ```console ```

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.24.3, on macOS 14.1.1 23B81 darwin-arm64, locale fr-FR) • Flutter version 3.24.3 on channel stable at /Users/xxxx/.puro/envs/stable/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2663184aa7 (2 weeks ago), 2024-09-11 16:27:48 -0500 • Engine revision 36335019a8 • Dart version 3.5.3 • DevTools version 2.37.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/xxxx/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.4) • Xcode at /Applications/Xcode-15.4.0.app/Contents/Developer • Build 15F31d • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) [✓] VS Code (version 1.93.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.96.0 [✓] Connected device (4 available) • IN2023 (mobile) • 87950fce • android-arm64 • Android 13 (API 33) • macOS (desktop) • macos • darwin-arm64 • macOS 14.1.1 23B81 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.1.1 23B81 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.60 ! Error: Browsing on the local area network for iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources • All expected network resources are available. • No issues found! ```
huycozy commented 2 weeks ago

Hi @letsar

It looks like this https://github.com/flutter/flutter/issues/154615 is talking about the same use case, but it has been closed without further investigation.

I see https://github.com/flutter/flutter/issues/154615 is still open. Perhaps you wanted to link to another issue? Can you check and confirm this?

letsar commented 1 week ago

Yes you are right, I wanted to link #155395 instead 🙈

huycozy commented 1 week ago

Reproduced the issue as reported on Flutter master 3.26.0-1.0.pre.280.

I'm pretty inclined to consider this issue as a feature request. I see this will work if we have separate SliverMainAxisGroup(s) and move all pinned headers to each SliverMainAxisGroup.

However, marking this as a bug to have thoughts from others. Thanks!

Work as expected when using multiple SliverMainAxisGroup ```dart CustomScrollView( slivers: [ SliverMainAxisGroup( slivers: [ _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.green, pinned: true), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), ], ), SliverMainAxisGroup( slivers: [ _Sliver(color: Colors.green, pinned: true), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), ], ), SliverMainAxisGroup( slivers: [ _Sliver(color: Colors.green, pinned: true), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), _Sliver(color: Colors.red, pinned: false), _Sliver(color: Colors.yellow, pinned: false), ], ), ], ) ```