Repository navigation
Feature Request: Sliver Row #56756
Description
Activity
CC @Piinks
Hi @abdulghani would changing the
scrollDirectionof yourCustomScrollViewachieve the desired behavior? ThescrollDirectiondefaults toAxis.vertical, but it can be changed toAxis.horizontalto lay out slivers horizontally.I don't think that what he needs. The scroll would still be vertical. But there would be two SliverList aligned in a row. Kind of a SliverGrid but with different use cases
Reacted by Kate Lovett, samithe7 and Chau CaoI don't think that what he needs. The scroll would still be vertical. But there would be two SliverList aligned in a row. Kind of a SliverGrid but with different use cases
Oh! Thanks! I think I understand better now, having vertical and horizontal scrollables composed together? I have seen this achieved before in a couple of different ways.
Here are some references on stackoverflow:
https://stackoverflow.com/questions/54512171/horizontal-listview-inside-a-vertical-scrollview-in-flutter
https://stackoverflow.com/questions/50766553/how-to-create-horizontal-and-vertical-scrollable-widgets-in-flutterAlso, regarding the lazily loading items, the ListView is actually a SliverList under the hood. :)
Reacted by Ghani@Piinks What if I need two vertical SilverList?
I'm trying to cloning Spotify Podcast view on desktop. This view contain a header, a list builder, and a Right side widget - probably a list too:
Because the episode list require to be a list builder due to a podcast can have thousand episodes, I haven't find a way to achieve the same thing. SliverRow is probably what I need.
@ChauCM there are probably a couple of different ways you could create such a UI, I would recommend asking on stackoverflow or in one of our other community channels: https://flutter.dev/community
Also, you may be interested in this package: https://pub.dev/packages/sliver_tools
Reacted by Sint and Karlo Verde@abdulghani, have you found a solution which works for your issue? I am also looking for a way to fix this.
@Piinks What if I need two vertical SilverList? I'm trying to cloning Spotify Podcast view on desktop. This view contain a header, a list builder, and a Right side widget - probably a list too:
Because the episode list require to be a list builder due to a podcast can have thousand episodes, I haven't find a way to achieve the same thing. SliverRow is probably what I need.
return SingleChildScrollView( child: Column( children: [ const BannerWidget( bannerImg: 'assets/images/slider-bg3.png', title: 'BLOG', subTitle: 'Home . Blog', ), Container( height: Responsive.setResponsiveValue( context: context, forMobileS: 60.0, forMobileM: 80.0, forMobileL: 100.0, forTablet: 100.0, forLaptopN: 120.0, forLaptopL: 140.0, forTv4k: 240.0, ), width: double.infinity, color: HexColor('#F7F7F7'), margin: EdgeInsets.all( Responsive.setResponsiveValue( context: context, forMobileS: 0.0, forMobileM: 0.0, forMobileL: 0.0, forTablet: 15.0, forLaptopN: 20.0, forLaptopL: 20.0, forTv4k: 40.0, ), ), child: Center( child: Padding( padding: EdgeInsets.symmetric( horizontal: Responsive.setResponsiveValue( context: context, forMobileS: 46.0, forMobileM: 46.0, forMobileL: 46.0, forTablet: 15.0, forLaptopN: 20.0, forLaptopL: 20.0, forTv4k: 20.0, ), ), child: Text( 'LATEST TRENDS', maxLines: 2, textAlign: TextAlign.center, style: GoogleFonts.getFont( 'Tinos', fontSize: Responsive.setResponsiveValue( context: context, forMobileS: 11.0, forMobileM: 14.0, forMobileL: 16.0, forTablet: 24.0, forLaptopN: 32.0, forLaptopL: 32.0, forTv4k: 52.0, ), fontWeight: FontWeight.bold, ), ), ), ), ), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: Wrap( spacing: 6.0, runSpacing: 6.0, children: [ for (var i = 0; i < strings.length; i++) Column( children: [ SizedBox( height: Responsive.setResponsiveValue( context: context, forMobileS: 10.0, forMobileM: 10.0, forMobileL: 10.0, forTablet: 10.0, forLaptopN: 20.0, forLaptopL: 10.0, forTv4k: 10.0, ), ), SizedBox( height: Responsive.setResponsiveValue( context: context, forMobileS: 205.0, forMobileM: 205.0, forMobileL: 205.0, forTablet: 240.0, forLaptopN: 200.0, forLaptopL: 280.0, forTv4k: 280.0, ), width: Responsive.setResponsiveValue( context: context, forMobileS: 300.0, forMobileM: 300.0, forMobileL: 300.0, forTablet: 340.0, forLaptopN: 310.0, forLaptopL: 440.0, forTv4k: 440.0, ), child: Image.asset( 'assets/images/blog1.png', fit: BoxFit.cover, ), ), SizedBox( height: Responsive.setResponsiveValue( context: context, forMobileS: 25.0, forMobileM: 25.0, forMobileL: 25.0, forTablet: 20.0, forLaptopN: 20.0, forLaptopL: 30.0, forTv4k: 30.0, ), ), SizedBox( width: Responsive.setResponsiveValue( context: context, forMobileS: 300.0, forMobileM: 300.0, forMobileL: 300.0, forTablet: 340.0, forLaptopN: 310.0, forLaptopL: 440.0, forTv4k: 440.0, ), child: Text( '5 TIPS FOR ELIMINATING FINE LINES', maxLines: 2, style: GoogleFonts.getFont( 'Tinos', fontSize: Responsive.setResponsiveValue( context: context, forMobileS: 16.8, forMobileM: 16.0, forMobileL: 16.0, forTablet: 19.0, forLaptopN: 17.5, forLaptopL: 24.0, forTv4k: 24.0, ), fontWeight: FontWeight.w400, color: HexColor('#1D408A'), ), ), ), SizedBox( height: Responsive.setResponsiveValue( context: context, forMobileS: 5.0, forMobileM: 5.0, forMobileL: 5.0, forTablet: 5.0, forLaptopN: 5.0, forLaptopL: 5.0, forTv4k: 5.0, ), ), SizedBox( width: Responsive.setResponsiveValue( context: context, forMobileS: 300.0, forMobileM: 300.0, forMobileL: 300.0, forTablet: 340.0, forLaptopN: 310.0, forLaptopL: 440.0, forTv4k: 440.0, ), child: Row( children: [ Text( 'July 11, 2022', style: GoogleFonts.getFont( 'Poppins', fontSize: Responsive.setResponsiveValue( context: context, forMobileS: 13.0, forMobileM: 13.0, forMobileL: 13.0, forTablet: 13.0, forLaptopN: 15.0, forLaptopL: 18.0, forTv4k: 18.0, ), fontWeight: FontWeight.w400, color: HexColor('#9D93B4'), ), ), SizedBox( width: Responsive.setResponsiveValue( context: context, forMobileS: 30.0, forMobileM: 30.0, forMobileL: 30.0, forTablet: 30.0, forLaptopN: 30.0, forLaptopL: 30.0, forTv4k: 30.0, ), ), Text( '3 Comments', style: GoogleFonts.getFont( 'Poppins', fontSize: Responsive.setResponsiveValue( context: context, forMobileS: 13.0, forMobileM: 13.0, forMobileL: 13.0, forTablet: 13.0, forLaptopN: 15.0, forLaptopL: 18.0, forTv4k: 18.0, ), fontWeight: FontWeight.w400, color: HexColor('#9D93B4'), ), ), ], ), ), SizedBox( height: Responsive.setResponsiveValue( context: context, forMobileS: 10.0, forMobileM: 10.0, forMobileL: 10.0, forTablet: 10.0, forLaptopN: 16.0, forLaptopL: 10.0, forTv4k: 10.0, ), ), SizedBox( width: Responsive.setResponsiveValue( context: context, forMobileS: 300.0, forMobileM: 300.0, forMobileL: 300.0, forTablet: 340.0, forLaptopN: 310.0, forLaptopL: 440.0, forTv4k: 440.0, ), child: Text( 'Quuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quiaolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam dolor sit amet, consectetur', maxLines: 7, style: GoogleFonts.getFont( 'Poppins', fontSize: Responsive.setResponsiveValue( context: context, forMobileS: 12.0, forMobileM: 13.0, forMobileL: 13.0, forTablet: 15.0, forLaptopN: 14.5, forLaptopL: 21.0, forTv4k: 21.0, ), fontWeight: FontWeight.w400, color: HexColor('#5C636E'), height: Responsive.setResponsiveValue( context: context, forMobileS: 2.0, forMobileM: 2.0, forMobileL: 2.0, forTablet: 2.0, forLaptopN: 1.7, forLaptopL: 2.0, forTv4k: 2.0, ), ), ), ), ], ) ], ), ), Container( height: Responsive.setResponsiveValue( context: context, forMobileS: 100.0, forMobileM: 100.0, forMobileL: 100.0, forTablet: 240.0, forLaptopN: 310.0, forLaptopL: 240.0, forTv4k: 240.0, ), width: Responsive.setResponsiveValue( context: context, forMobileS: 100.0, forMobileM: 100.0, forMobileL: 100.0, forTablet: 240.0, forLaptopN: 310.0, forLaptopL: 240.0, forTv4k: 240.0, ), color: Colors.black, child: Column( children: [], ), ), ], ), ], ), )
6 remaining items
@drogbut - have you looked at #33137 per #56756 (comment) ?
I'll be working on this very soon!
Reacted by ElHey everyone, I wrote up a design doc for grouping Slivers into a single Sliver. I'd appreciate any opinions people might have!
- moved this from In Progress to Done in Scrolling Performance Pitfalls
on Apr 28, 2023 - added a commit that references this issue
on Apr 28, 2023 This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on May 13, 2023
There's no
Rowequivalent for sliver, to lay slivers horizontally.the closest one is this #33138 which is for vertical columns
this would be useful to use sliver type widgets to like
SliverListto get it's lazily rendering items.Use case
would be something like this