Skip to content

Feature Request: Sliver Row #56756

Closed
#123862
Closed
Feature Request: Sliver Row#56756
#123862
Assignees
thkim1011
Labels
P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterd: stackoverflowGood question for Stack Overflowf: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

Description

@abdulghani
abdulghani
opened on May 9, 2020

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}")))
      ]
    )
  ]
)

Activity

  1. TahaTesser
    added
    p: material_uimaterial_ui package in flutter/packages
    f: scrollingViewports, list views, slivers, etc.
    frameworkflutter/packages/flutter repository. See also f: labels.
    c: proposalA detailed proposal for a change to Flutter
    c: new featureNothing broken; request for a new capability
    on May 11, 2020

  2. HansMuller commented on May 11, 2020

    @HansMuller
    HansMuller
    on May 11, 2020
    Contributor

    CC @Piinks

  3. Piinks commented on May 11, 2020

    @Piinks
    Piinks
    on May 11, 2020
    Contributor

    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.

  4. jamesblasco commented on Jun 15, 2020

    @jamesblasco
    jamesblasco
    on Jun 15, 2020
    Contributor

    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

  5. Piinks commented on Jun 17, 2020

    @Piinks
    Piinks
    on Jun 17, 2020
    Contributor

    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. :)

  6. darshankawar
    added
    passed first triage
    on Mar 2, 2021

  7. ChauCM commented on Feb 22, 2022

    @ChauCM
    ChauCM
    on Feb 22, 2022

    @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:
    ezgif-2-121711b582

    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.

  8. Piinks
    added
    d: stackoverflowGood question for Stack Overflow
    on Feb 22, 2022

  9. Piinks commented on Feb 22, 2022

    @Piinks
    Piinks
    on Feb 22, 2022
    Contributor

    @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

  10. Tobivaria commented on Apr 30, 2022

    @Tobivaria
    Tobivaria
    on Apr 30, 2022

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

  11. AbdulGafoorShaik186 commented on May 15, 2022

    @AbdulGafoorShaik186
    AbdulGafoorShaik186
    on May 15, 2022

    @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: ezgif-2-121711b582

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

  12. 6 remaining items

  13. Piinks
    moved this to Todo in Scrolling Performance Pitfallson Dec 14, 2022

  14. drogbut commented on Jan 2, 2023

    @drogbut
    drogbut
    on Jan 2, 2023

    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.

  15. HansMuller commented on Jan 3, 2023

    @HansMuller
    HansMuller
    on Jan 3, 2023
    Contributor

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

  16. thkim1011 commented on Jan 3, 2023

    @thkim1011
    thkim1011
    on Jan 3, 2023
    Contributor

    I'll be working on this very soon!

  17. thkim1011 commented on Feb 13, 2023

    @thkim1011
    thkim1011
    on Feb 13, 2023
    Contributor

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

  18. Piinks
    moved this from Todo to In Progress in Scrolling Performance Pitfallson Mar 10, 2023
  19. auto-submit
    closed this as completedin #123862on Apr 28, 2023
  20. github-project-automation
    moved this from In Progress to Done in Scrolling Performance Pitfallson Apr 28, 2023
  21. auto-submit
    added a commit that references this issue on Apr 28, 2023

    Sliver Cross Axis Group (#123862)

    1a0b03c

  22. github-actions commented on May 13, 2023

    @github-actions
    github-actionsbot
    on May 13, 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 -v and a minimal reproduction of the issue.

  23. github-actions
    locked as resolved and limited conversation to collaborators on May 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterd: stackoverflowGood question for Stack Overflowf: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions