{"id":20612865,"url":"https://github.com/srinivasa-dev/wheel_slider","last_synced_at":"2025-04-15T07:09:06.612Z","repository":{"id":62458722,"uuid":"496132564","full_name":"srinivasa-dev/wheel_slider","owner":"srinivasa-dev","description":"Wheel Slider allows you to scroll through with a wheel like look, which have a bunch of customization.","archived":false,"fork":false,"pushed_at":"2024-12-16T13:25:01.000Z","size":158,"stargazers_count":18,"open_issues_count":3,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T07:08:58.597Z","etag":null,"topics":["android","app","application","cross-platform","flutter","flutter-apps","hacktoberfest","ios","library","open-source","package","plugin","slider","web","wheel","wheel-slider","windows"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/wheel_slider","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/srinivasa-dev.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}},"created_at":"2022-05-25T07:47:26.000Z","updated_at":"2025-03-28T21:28:55.000Z","dependencies_parsed_at":"2023-12-08T11:26:10.620Z","dependency_job_id":"d8a01180-6938-4251-8d47-ec1ab77c98f9","html_url":"https://github.com/srinivasa-dev/wheel_slider","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/srinivasa-dev%2Fwheel_slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srinivasa-dev%2Fwheel_slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srinivasa-dev%2Fwheel_slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srinivasa-dev%2Fwheel_slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srinivasa-dev","download_url":"https://codeload.github.com/srinivasa-dev/wheel_slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023723,"owners_count":21199960,"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":["android","app","application","cross-platform","flutter","flutter-apps","hacktoberfest","ios","library","open-source","package","plugin","slider","web","wheel","wheel-slider","windows"],"created_at":"2024-11-16T11:08:09.191Z","updated_at":"2025-04-15T07:09:06.605Z","avatar_url":"https://github.com/srinivasa-dev.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wheel Slider\n\nA versatile and highly customizable slider widget for Flutter, with a wheel-like scrolling appearance.\n\n[![pub package](https://img.shields.io/pub/v/wheel_slider)](https://pub.dev/packages/wheel_slider) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\n\n![gif of wheel slider](https://media.giphy.com/media/2NHFjGDJ9AZsQL02SD/giphy.gif)\n![gif of wheel slider](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdnd3cHZxeXpoNHUzOHZkY2c5ZjczY3Y5cmNoNTUwaGFxc2ZoZ2lwdCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/m7yxCFXyJZIAOWTSI2/giphy.gif)\n\n\u003e Built on top of [`wheel_chooser`](https://pub.dev/packages/wheel_chooser) for an enhanced experience.\n\n## ✨ Features\n\n- **🔢 Number Display**: Show numbers instead of simple lines.\n- **↔↕ Scroll Orientation**: Horizontal and vertical scrolling options.\n- **📳 Haptic Feedback**: Vibrates during scroll for a tactile experience.\n- **🔧 Custom Widgets**: Fully customizable items and pointers.\n- **🖼️ Background Support**: Add a widget as the slider's background.\n- **🎨 Styling Options**: Easily customize line and pointer colors.\n\n## 🚀 Getting Started\n\n### Installation\nAdd the following to your `pubspec.yaml` under `dependencies`:\n\n```yaml\n  dependencies:\n    wheel_slider:\n```\n#### Import\n\n```dart \nimport 'package:wheel_slider/wheel_slider.dart';\n```\n\n### Android Permissions\n\nAdd the vibration permission to your `AndroidManifest.xml` file:\n\n```xml\n\u003cuses-permission android:name=\"android.permission.VIBRATE\"/\u003e\n```\n\n### IOS Compatibility\n\nSupports vibration with duration and pattern on CoreHaptics devices. On older devices, the pattern is emulated with 500ms long vibrations.\n\n## 📖 Usage\n\nTo use __Line Slider__:\n\n```dart\nWheelSlider(\n    totalCount: _totalCount,\n    initValue: _initValue,\n    onValueChanged: (val) {\n        setState(() {\n          _currentValue = val;\n        });\n    },\n    hapticFeedbackType: HapticFeedbackType.vibrate,\n),\n```\n\nTo use __Line Slider__ with displaying double value:\n\n```dart\nWheelSlider(\n    interval: 0.5,  // this field is used to show decimal/double values\n    totalCount: _totalCount,\n    initValue: _initValue,\n    onValueChanged: (val) {\n        setState(() {\n          _currentValue = val;\n        });\n    },\n    hapticFeedbackType: HapticFeedbackType.vibrate,\n),\n```\n\nTo use __Number Slider__:\n\n```dart\nWheelSlider.number(\n    perspective: 0.01,\n    totalCount: _nTotalCount,\n    initValue: _nInitValue,\n    unSelectedNumberStyle: const TextStyle(\n        fontSize: 12.0,\n        color: Colors.black54,\n    ),\n    currentIndex: _nCurrentValue,\n    onValueChanged: (val) {\n        setState(() {\n          _nCurrentValue = val;\n        });\n    },\n    hapticFeedbackType: HapticFeedbackType.heavyImpact,\n),\n```\n\nTo use __Number Slider__ with displaying double value:\n\n```dart\nWheelSlider.number(\n    interval: 0.5, // this field is used to show decimal/double values\n    perspective: 0.01,\n    totalCount: _nTotalCount,\n    initValue: _nInitValue,\n    unSelectedNumberStyle: const TextStyle(\n        fontSize: 12.0,\n        color: Colors.black54,\n    ),\n    currentIndex: _nCurrentValue,\n    onValueChanged: (val) {\n        setState(() {\n          _nCurrentValue = val;\n        });\n    },\n    hapticFeedbackType: HapticFeedbackType.heavyImpact,\n),\n```\n\nTo use __Custom Widget Slider__:\n\n```dart\nWheelSlider.customWidget(\n    totalCount: 12,\n    initValue: 5,\n    isInfinite: false,\n    scrollPhysics: const BouncingScrollPhysics(),\n    children: List.generate(12, (index) =\u003e const Center(\n        child: FlutterLogo(\n            size: 100,\n        ),\n    )),\n    onValueChanged: (val) {\n        setState(() {\n          _cCurrentValue = val;\n        });\n    },\n    hapticFeedbackType: HapticFeedbackType.vibrate,\n    showPointer: false,\n    itemSize: 80,\n),\n```\n\n#### 🛠️ Properties\n\n* `controller` - A `FixedExtentScrollController` that allows you to manage and control the scroll position of the slider.\n* `interval` - To display decimal values. By default it is set to 1, when changed `totalCount` also to be updated accordingly.\n* `currentIndex` - Gets the current value as you scroll the Number Slider.\n* `perspective` - Change the way you want the slider to look from a flat to a wheel like shape and the value must be \u003c= 0.01.\n* `squeeze` - Adjust the spacing between each item in the slider.\n* `isVibrate` - To turn on/off vibration while scrolling.\n* `hapticFeedbackType` - Allows you to change the vibration type.\n* `itemSize` - Size of each item in the slider.\n* `background` - Use any widget to add as a background to the slider.\n* `allowPointerTappable`:\n  * When this is set to `false` scroll functionality won't work for the occupied region.\n  * When using customPointer with GestureDetector/InkWell, set it to `false` to enable gestures.\n  * When using default pointer set it to default state i.e `true`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrinivasa-dev%2Fwheel_slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrinivasa-dev%2Fwheel_slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrinivasa-dev%2Fwheel_slider/lists"}