Feature Request: Sliver Row

[abdulghani]

There's no Row equivalent 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 SliverList to get it's lazily rendering items.

Use case

would be something like this

CustomScrollView(
  slivers: [
    SliverRow(
      children: [
        SliverList(delegate: 
            SliverChildBuilderDelegate(
                (BuildContext context, int i) => Text("hello ${i}"))),
        SliverList(delegate: 
            SliverChildBuilderDelegate(
                (BuildContext context, int i) => Text("another ${i}")))
      ]
    )
  ]
)

[HansMuller]

CC @Piinks

[Piinks]

Hi @abdulghani would changing the scrollDirection of your CustomScrollView achieve the desired behavior? The scrollDirection defaults to Axis.vertical, but it can be changed to Axis.horizontal to lay out slivers horizontally.

[jamesblasco]

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

[Piinks]

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

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-flutter

Also, regarding the lazily loading items, the ListView is actually a SliverList under the hood. :)

[ChauCM]

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

[Piinks]

@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

[Tobivaria]

@abdulghani, have you found a solution which works for your issue? I am also looking for a way to fix this.

[AbdulGafoorShaik186]

@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: [],
                ),
              ),
            ],
          ),
        ],
      ),
    )

[Andreigr0]

Check out my answer here https://stackoverflow.com/a/72705975/9586934

[Hellomik2002]

I think we need new Sliver Tools in Flutter. Flutter need more tools for WEB.

[Piinks]

This will likely be best implemented with #33137, where that issue would use SliverGroup to group via the main axis, and for this, SliverGroup would group via the cross axis

[drogbut]

Hello @Piinks this issue has been open since 2020. I would like to know if the flutter team has already found solutions to this? For the large screens, the solution to this problem would be very useful. Thank you in advance for your answer.

[HansMuller]

@drogbut - have you looked at #33137 per #56756 (comment) ?

[thkim1011]

I'll be working on this very soon!

[thkim1011]

Hey everyone, I wrote up a design doc for grouping Slivers into a single Sliver. I'd appreciate any opinions people might have!

[github-actions]

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 -v and a minimal reproduction of the issue.