{"id":20609502,"url":"https://github.com/fluttercommunity/flutter-draggable-scrollbar","last_synced_at":"2025-04-04T12:07:40.277Z","repository":{"id":32652280,"uuid":"138317095","full_name":"fluttercommunity/flutter-draggable-scrollbar","owner":"fluttercommunity","description":"Draggable Scrollbar - A scrollbar that can be dragged for quickly navigation through a vertical list. Additional option is showing label next to scrollthumb with information about current item. Maintainer: @marica27","archived":false,"fork":false,"pushed_at":"2022-05-21T10:07:47.000Z","size":3361,"stargazers_count":442,"open_issues_count":50,"forks_count":74,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-28T11:07:34.308Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/draggable_scrollbar","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/fluttercommunity.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-22T15:12:23.000Z","updated_at":"2024-12-20T08:49:48.000Z","dependencies_parsed_at":"2022-08-07T17:47:37.753Z","dependency_job_id":null,"html_url":"https://github.com/fluttercommunity/flutter-draggable-scrollbar","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fflutter-draggable-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fflutter-draggable-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fflutter-draggable-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fflutter-draggable-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluttercommunity","download_url":"https://codeload.github.com/fluttercommunity/flutter-draggable-scrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174418,"owners_count":20896078,"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-11-16T10:13:44.400Z","updated_at":"2025-04-04T12:07:40.257Z","avatar_url":"https://github.com/fluttercommunity.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Flutter Community: draggable_scrollbar](https://fluttercommunity.dev/_github/header/draggable_scrollbar)](https://github.com/fluttercommunity/community)\n\n# Draggable Scrollbar\n\n[![Pub](https://img.shields.io/pub/v/draggable_scrollbar.svg)](https://pub.dartlang.org/packages/draggable_scrollbar)\n\nA scrollbar that can be dragged for quickly navigation through a vertical list. Additionaly it can show label next to scrollthumb with information about current item, for example date of picture created\n\n## Usage\n\nYou can use one of the three built-in scroll thumbs, or you can create a custom thumb for your own app!\n\nYou can play with all of these examples by running the app found in the `example` folder. \n\n### Example \n![](https://github.com/fluttercommunity/flutter-draggable-scrollbar/raw/gh-pages/demo.gif)\n\n### Semicircle Thumb\n\n```dart\nDraggableScrollbar.semicircle(\n  controller: myScrollController,\n  child: GridView.builder(\n    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(\n      crossAxisCount: 5,\n    ),\n    controller: myScrollController,\n    padding: EdgeInsets.zero,\n    itemCount: 1000,\n    itemBuilder: (context, index) {\n      return Container(\n        alignment: Alignment.center,\n        margin: EdgeInsets.all(2.0),\n        color: Colors.grey[300],\n      );\n    },\n  ),\n);\n```\n\n### Arrows thumb + label\n\n```dart\nDraggableScrollbar.arrows(\n  labelTextBuilder: (double offset) =\u003e Text(\"${offset ~/ 100}\"),\n  controller: myScrollController,\n  child: ListView.builder(\n    controller: myScrollController,\n    itemCount: 1000,\n    itemExtent: 100.0,\n    itemBuilder: (context, index) {\n      return Container(\n        padding: EdgeInsets.all(8.0),\n        child: Material(\n          elevation: 4.0,\n          borderRadius: BorderRadius.circular(4.0),\n          color: Colors.purple[index % 9 * 100],\n          child: Center(\n            child: Text(index.toString()),\n          ),\n        ),\n      );\n    },\n  ),\n);\n```\n\n### Rounded Rectangle Thumb\n\n```dart\nDraggableScrollbar.rrect(\n  controller: myScrollController,\n  child: ListView.builder(\n    controller: myScrollController,\n    itemCount: 1000,\n    itemExtent: 100.0,\n    itemBuilder: (context, index) {\n      return Container(\n        padding: EdgeInsets.all(8.0),\n        child: Material(\n          elevation: 4.0,\n          borderRadius: BorderRadius.circular(4.0),\n          color: Colors.green[index % 9 * 100],\n          child: Center(\n            child: Text(index.toString()),\n          ),\n        ),\n      );\n    },\n  ),\n);\n```\n\n### Custom\n\n```dart\nDraggableScrollbar(\n  controller: myScrollController,\n  child: ListView.builder(\n    controller: myScrollController,\n    itemCount: 1000,\n    itemExtent: 100.0,\n    itemBuilder: (context, index) {\n      return Container(\n        padding: EdgeInsets.all(8.0),\n        child: Material(\n          elevation: 4.0,\n          borderRadius: BorderRadius.circular(4.0),\n          color: Colors.cyan[index % 9 * 100],\n          child: Center(\n            child: Text(index.toString()),\n          ),\n        ),\n      );\n    },\n  ),\n  heightScrollThumb: 48.0,\n  backgroundColor: Colors.blue,\n  scrollThumbBuilder: (\n    Color backgroundColor,\n    Animation\u003cdouble\u003e thumbAnimation,\n    Animation\u003cdouble\u003e labelAnimation,\n    double height, {\n    Text labelText,\n  }) {\n    return FadeTransition(\n      opacity: thumbAnimation,\n      child: Container(\n        height: height,\n        width: 20.0,\n        color: backgroundColor,\n      ),\n    );\n  },\n);\n```\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercommunity%2Fflutter-draggable-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluttercommunity%2Fflutter-draggable-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercommunity%2Fflutter-draggable-scrollbar/lists"}