{"id":22446815,"url":"https://github.com/fingertips18/scroll-wheel-date-picker","last_synced_at":"2025-10-08T19:49:13.279Z","repository":{"id":227904262,"uuid":"772665630","full_name":"Fingertips18/scroll-wheel-date-picker","owner":"Fingertips18","description":"A Flutter package for a scrollable and flat perspective wheel-type date picker like in TikTok.","archived":false,"fork":false,"pushed_at":"2024-06-10T12:55:21.000Z","size":5466,"stargazers_count":4,"open_issues_count":5,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-16T03:26:01.002Z","etag":null,"topics":["datepicker","flutter","package","pubdev","scrollwheel","ui","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/scroll_wheel_date_picker","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/Fingertips18.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-15T16:38:42.000Z","updated_at":"2024-11-03T13:33:53.000Z","dependencies_parsed_at":"2024-06-10T14:39:23.600Z","dependency_job_id":"0cd525f2-7393-4ed9-a232-ea9cd1fb287c","html_url":"https://github.com/Fingertips18/scroll-wheel-date-picker","commit_stats":null,"previous_names":["fingertips18/wheel-date-picker","fingertips18/scroll-wheel-date-picker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fingertips18%2Fscroll-wheel-date-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fingertips18%2Fscroll-wheel-date-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fingertips18%2Fscroll-wheel-date-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fingertips18%2Fscroll-wheel-date-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Fingertips18","download_url":"https://codeload.github.com/Fingertips18/scroll-wheel-date-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228407891,"owners_count":17915083,"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":["datepicker","flutter","package","pubdev","scrollwheel","ui","widget"],"created_at":"2024-12-06T04:12:02.050Z","updated_at":"2025-10-08T19:49:06.486Z","avatar_url":"https://github.com/Fingertips18.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scroll Wheel Date Picker\n\nHave you been in a situation where you want to use [CupertinoDatePicker](https://api.flutter.dev/flutter/cupertino/CupertinoDatePicker-class.html) but sadly you can't achieve a flat scroll view just like in android TikTok?\nOr maybe, you also resorted using [ListWheelScrollView](https://api.flutter.dev/flutter/widgets/ListWheelScrollView-class.html) yet still the same?\n\n#### Good news!\n\nThis package supports a wheel-type date-picker that has two scroll types: [CurveScrollWheel](https://github.com/Fingertips18/scroll-wheel-date-picker/blob/main/lib/src/widgets/curve_scroll_wheel.dart) and [FlatScrollWheel](https://github.com/Fingertips18/scroll-wheel-date-picker/blob/main/lib/src/widgets/flat_scroll_wheel.dart).\n\n## Features\n\n`ScrollWheelDatePicker` uses `ListWheelScrollView` for the `CurveScrollWheel` underneath. However, some features were added and modified in order to have the same functionality but without the curve perspective in `FlatScrollWheel`.\n\n#### Centered Selected Item\n\nJust like using `CupertinoDatePicker` or `ListWheelScrollView`, it allows you to select a date and expects that a particular item will always land on the center of the viewport.\n\n#### Choose Center Overlay\n\nYou can choose what type of overlay you want to have on the current selected item. `holo`, `highlight`, and `line` are some of the overlays to choose for. If you don't want any overlays you can just set it to `none`. (Expect additional overlays or the option to add your own soon..)\n\n#### Month Format\n\nIt allows you to select what type of month format you want to display. The available formats are `full` which simply means the complete name of the month, `threeLetters` and `twoLetters` basically formats the months based on their common abbreviations with the letter count.\n\n#### Faded Vertical Edges\n\nIt adds fade on top and bottom to create a smooth disapearance effect when the items are beyond the viewport. Defaults to `true`.\n\n#### Listen On Item Changes After Animation Completed\n\nUnlike `CupertinoDatePicker`, it gives you an option whether to listen to item changes only after the scroll animation ended/completed. `listenAfterChanges` defaults to true, otherwise, change to false to have the default functionality.\n\n#### Infinite Loop\n\nSupports looping on items. You can choose whether to enable looping on `days`, `months` or `years` individually.\n\n## Demo\n\n### Curve Scroll Wheel\n\n|    Curve Holo Overlay    |    Curve Highlight Overlay    |    Curve Line Overlay    |\n| :----------------------: | :---------------------------: | :----------------------: |\n| ![](demo/curve_holo.gif) | ![](demo/curve_highlight.gif) | ![](demo/curve_line.gif) |\n\n### Flat Scroll Wheel\n\n|    Flat Holo Overlay    |    Flat Highlight Overlay    |    Flat Line Overlay    |\n| :---------------------: | :--------------------------: | :---------------------: |\n| ![](demo/flat_holo.gif) | ![](demo/flat_highlight.gif) | ![](demo/flat_line.gif) |\n\n# Usage\n\nAdd the package to `pubspec.yaml`\n\n```bash\n$ flutter pub add scroll_wheel_date_picker\n```\n\nor\n\n```yaml\ndependencies:\n  scroll_wheel_date_picker: ^0.0.2+1\n```\n\nThen import the package.\n\n```dart\nimport 'package:scroll_wheel_date_picker/scroll_wheel_date_picker.dart';\n```\n\nAnd use like this...\n\n```dart\nScrollWheelDatePicker(\n  theme: FlatDatePickerTheme(\n    backgroundColor: Colors.white,\n    overlay: ScrollWheelDatePickerOverlay.holo,\n    itemTextStyle: defaultItemTextStyle.copyWith(color: Colors.black),\n    overlayColor: Colors.black,\n    overAndUnderCenterOpacity: 0.2,\n  ),\n),\n```\n\n## Contributors\n\n\u003ca href=\"https://github.com/Fingertips18/scroll-wheel-date-picker/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Fingertips18/scroll-wheel-date-picker\" /\u003e\n\u003c/a\u003e\n\n---\n\n_Ghian Tan_ @ _Fingertips_ ([Github](https://github.com/Fingertips18))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingertips18%2Fscroll-wheel-date-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffingertips18%2Fscroll-wheel-date-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingertips18%2Fscroll-wheel-date-picker/lists"}