{"id":13800265,"url":"https://github.com/superlistapp/super_sliver_list","last_synced_at":"2025-04-05T15:08:55.676Z","repository":{"id":60139866,"uuid":"541202286","full_name":"superlistapp/super_sliver_list","owner":"superlistapp","description":"Drop-in replacement for SliverList and ListView that can handle large amount of items with variable extents and reliably jump / animate to any item.","archived":false,"fork":false,"pushed_at":"2024-07-24T18:53:25.000Z","size":7115,"stargazers_count":335,"open_issues_count":22,"forks_count":24,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-29T14:10:58.549Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://superlistapp.github.io/super_sliver_list/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/superlistapp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"knopp"}},"created_at":"2022-09-25T14:41:11.000Z","updated_at":"2025-03-28T07:10:19.000Z","dependencies_parsed_at":"2024-07-24T21:26:40.219Z","dependency_job_id":"79a22e9e-4bcb-4df8-ae8d-0e40bec1ba97","html_url":"https://github.com/superlistapp/super_sliver_list","commit_stats":{"total_commits":28,"total_committers":2,"mean_commits":14.0,"dds":0.0357142857142857,"last_synced_commit":"07c7d55cc0c05ffaf7b9af059cccc906f5810ca1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superlistapp%2Fsuper_sliver_list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superlistapp%2Fsuper_sliver_list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superlistapp%2Fsuper_sliver_list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superlistapp%2Fsuper_sliver_list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/superlistapp","download_url":"https://codeload.github.com/superlistapp/super_sliver_list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353746,"owners_count":20925329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T00:01:10.910Z","updated_at":"2025-04-05T15:08:55.647Z","avatar_url":"https://github.com/superlistapp.png","language":"Dart","funding_links":["https://github.com/sponsors/knopp"],"categories":["Components","Dart"],"sub_categories":["UI"],"readme":"# SliverList and ListView - Supercharged\n\n\u003e See the [live example](https://superlistapp.github.io/super_sliver_list/#/) of `SuperSliverList`.\n\n`SuperSliverList` and `SuperListView` are drop in replacement widgets for `SliverList` and `ListView` with greatly improved performance and additional features:\n\n#### Fast scrolling with large amount of items with variable extents\n\n`SliverList` performance degrades heavily when quickly scrolling through a large amount of items with different extents, requiring workarounds such as using `FixedExtentSliverList` or prototype items. `SuperSliverList` uses different layout algorithm and can handle virtually unlimited number of items with variable extents without any slow-downs.\n\n#### Ability to jump or animate to specific item\n\n`SliverList` does not provide any way to jump or animate a particular index. There is a [scrollable_positioned_list](https://pub.dev/packages/scrollable_positioned_list) package that provides this functionality, but it comes at a cost, as it requires custom scroll view, does not seem to work properly with Scrollbars, can't be used with with other slivers (such as sticky headers) and ultimately is backed by a `SliverList` so it has the same performance issues as mentioned above.\n\n`SuperSliverList` provides a way to reliably jump and animate to a specific item, even if the item is outside of the viewport and has not been built or laid out yet.\n\n#### Smooth and predictable scrollbar behavior\n\n`SliverList` is quite prone to scrollbar erraticaly jumping around when scrolling through a list of items with different extents. With `SuperSliverList` the scrollbar should behave more predictably. See the [Advanced](#advanced) section for more details.\n\n## Basic Usage\n\n`SuperListView` is a drop-in replacement for `ListView`, and as such you can use it same way you'd use `ListView`:\n\n```dart\nSuperListView.builder(\n  itemCount: 1000,\n  itemBuilder: (context, index) {\n    return ListTile(title: Text('Item $index'));\n  },\n)\n```\n\n`SuperSliverList` is a drop-in replacement for `SliverList` and should work with any `CustomScrollView` configuration:\n ```dart\n CustomScrollView(\n   slivers: \u003cWidget\u003e[\n     SliverPadding(\n       padding: const EdgeInsets.all(20.0),\n       sliver: SuperSliverList(\n         delegate: SliverChildListDelegate(\n           \u003cWidget\u003e[\n             const Text(\"I'm dedicating every day to you\"),\n             const Text('Domestic life was never quite my style'),\n             const Text('When you smile, you knock me out, I fall apart'),\n             const Text('And I thought I was so smart'),\n           ],\n         ),\n       ),\n     ),\n   ],\n )\n ```\n\n## Jumping and animating to specific item\n\n`ListController` can be provided to `SuperSliverList`/`SuperListView` and used to jump or animate to specific item:\n\n```dart\nclass _MyState extends State\u003cMyWidget\u003e {\n  final _listController = ListController();\n  final _scrollController = ScrollController();\n\n  @override\n  Widget build(BuildContext context) {\n    return SuperListView.builder(\n      listController: _listController,\n      controller: _scrollController,\n      itemCount: 1000,\n      itemBuilder: (context, index) {\n        return ListTile(title: Text('Item $index'));\n      },\n    );\n  }\n\n  void jumpToItem(int index) {\n    _listController.jumpToItem(\n      index: index,\n      scrollController: _scrollController,\n      alignment: 0.5,\n    );\n  }\n\n  void animateToItem(int index) {\n    _listController.animateToItem(\n      index: index,\n      scrollController: _scrollController,\n      alignment: 0.5,\n      // You can provide duration and curve depending on the estimated\n      // distance between currentPosition and the target item position.\n      duration: (estimatedDistance) =\u003e Duration(milliseconds: 250),\n      curve: (estimatedDistance) =\u003e Curves.easeInOut,\n    );\n  }\n}\n```\n\n## Advanced\n\nVery roughtly speaking `SuperSliverList` works by estimating the extent of items that are outside of viewport and when these items are scrolled into the viewport cache area the scroll position is transparently adjusted to account of the difference between estimated and actual extents. On small lists this difference may result in scrollbar movement not being perfectly aligned with list movement. `SuperSliverList` provides two ways to rectify this:\n\n### Improve extent estimation\n\nYou can register custom callback that will be used to estimate extent of estimated items. This can be useful if you have an idea, atleast approximately, how large the extent of each item is.\n\n```dart\nSuperSliverList(\n    delegate: /*...*/,\n    estimateExtent: (index) =\u003e 100.0, // Provide your own extent estimation\n)\n```\n\n### Precalculate extents for items\n\n`SuperSliverList` can, if needed, asynchronously precalculate extents for items. To enfore this, subclass `ExtentPrecalculationPolicy` and provide it to `SuperSliverList`:\n\nIn this example the extents are eagerly precalculated for lists with less than 100 items:\n\n```dart\nclass MyPrecalculationPolicy extends ExtentPrecalculationPolicy {\n  @override\n  bool shouldPrecaculateExtents(ExtentPrecalculationContext context)  {\n    return context.numberOfItems \u003c 100;\n  }\n}\n\nreturn SuperSliverList(\n    delegate: /*...*/,\n    extentPrecalculationPolicy: myPolicy,\n)\n```\n\nThe threshold is arbitrary, but in general there are diminishing returns for precalculating extents for large lists, as the extent estimation error for each item has much smaller impact on the scrollbar position if there are many items.\n\n## Example\n\nSee the [example](example) folder for a complete sample app using `SuperSliverList`. You can also see the [example deployed live](https://superlistapp.github.io/super_sliver_list/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperlistapp%2Fsuper_sliver_list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperlistapp%2Fsuper_sliver_list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperlistapp%2Fsuper_sliver_list/lists"}