{"id":13549288,"url":"https://github.com/kevlatus/flutter_fortune_wheel","last_synced_at":"2025-05-16T09:06:23.642Z","repository":{"id":43891754,"uuid":"277610194","full_name":"kevlatus/flutter_fortune_wheel","owner":"kevlatus","description":"Visualize random selections with Flutter widgets like the wheel of fortune.","archived":false,"fork":false,"pushed_at":"2024-10-20T16:22:40.000Z","size":5506,"stargazers_count":161,"open_issues_count":16,"forks_count":94,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-10T08:38:36.547Z","etag":null,"topics":["flutter","fortune","random","visualization"],"latest_commit_sha":null,"homepage":"https://kevlatus.github.io/flutter_fortune_wheel","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/kevlatus.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":"2020-07-06T17:46:03.000Z","updated_at":"2025-05-06T06:17:43.000Z","dependencies_parsed_at":"2024-02-05T22:26:51.041Z","dependency_job_id":"1273d4be-e32e-4d7f-8406-f473cd150c1b","html_url":"https://github.com/kevlatus/flutter_fortune_wheel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlatus%2Fflutter_fortune_wheel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlatus%2Fflutter_fortune_wheel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlatus%2Fflutter_fortune_wheel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlatus%2Fflutter_fortune_wheel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevlatus","download_url":"https://codeload.github.com/kevlatus/flutter_fortune_wheel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501558,"owners_count":22081528,"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":["flutter","fortune","random","visualization"],"created_at":"2024-08-01T12:01:20.268Z","updated_at":"2025-05-16T09:06:18.627Z","avatar_url":"https://github.com/kevlatus.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"[![](https://img.shields.io/pub/v/flutter_fortune_wheel)](https://pub.dev/packages/flutter_fortune_wheel)\n[![Coverage Status](https://coveralls.io/repos/github/kevlatus/flutter_fortune_wheel/badge.svg?branch=main)](https://coveralls.io/github/kevlatus/flutter_fortune_wheel?branch=main)\n\n# Flutter Fortune Wheel\n\nThis Flutter package includes wheel of fortune widgets, which allow you to visualize random selection processes.\nThey are highly customizable and work across mobile, desktop and the web.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/kevlatus/flutter_fortune_wheel/main/images/img-wheel-256.png\"\u003e\n\u003c/p\u003e\n\nYou can learn more about the wheel's implementation [in this article](https://www.kevlatus.de/blog/making-of-flutter-fortune-wheel)\nand try an [interactive demo here](https://kevlatus.github.io/flutter_fortune_wheel).\n\n## Quick Start\n\nFirst install the package via [pub.dev](https://pub.dev/packages/flutter_fortune_wheel/install).\nThen import and use the [FortuneWheel](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/FortuneWheel-class.html):\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';\nStreamController\u003cint\u003e controller = StreamController\u003cint\u003e();\nFortuneWheel(\n  selected: controller.stream,\n  items: [\n    FortuneItem(child: Text('Han Solo')),\n    FortuneItem(child: Text('Yoda')),\n    FortuneItem(child: Text('Obi-Wan Kenobi')),\n  ],\n)\n```\n\n## Examples\n\nThe wheel of fortune is the most iconic visualization.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/kevlatus/flutter_fortune_wheel/main/images/wheel-spin.gif\"\u003e\n\u003c/p\u003e\n\nUnfortunately, a circular shape is not the best solution when vertical screen space is scarce. Therefore,\nthe fortune bar, which is smaller in the vertical direction, is provided as an alternative. See below for an example:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/kevlatus/flutter_fortune_wheel/main/images/img-bar-anim.gif\"\u003e\n\u003c/p\u003e\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';\n\nStreamController\u003cint\u003e controller = StreamController\u003cint\u003e();\nFortuneBar(\n  selected: controller.stream,\n  items: [\n    FortuneItem(child: Text('Han Solo')),\n    FortuneItem(child: Text('Yoda')),\n    FortuneItem(child: Text('Obi-Wan Kenobi')),\n  ],\n)\n```\n\n## Customization\n\n### Drag Behavior\n\nBy default, the fortune widgets react to touch and drag input. This behavior can be customized using the `physics` property, which expects an implementation\nof the [`PanPhysics`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/PanPhysics-class.html) class.\nIf you want to disable dragging, simply pass an instance of [`NoPanPhysics`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/NoPanPhysics-class.html).\n\nFor the FortuneWheel, [`CircularPanPhysics`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/CircularPanPhysics-class.html)\nis recommended, while the FortuneBar uses [`DirectionalPanPhysics.horizontal`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/DirectionalPanPhysics/DirectionalPanPhysics.horizontal.html)\nby default. If none of the available implementations, suit your needs, you can always implement a subclass of [`PanPhysics`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/PanPhysics-class.html).\n\nThe callback passed to `onFling` is called when the pan physics detects a fling gesture. This gives\nyou the opportunity to select a new random item.\n\n```dart\nStreamController\u003cint\u003e controller = StreamController\u003cint\u003e();\nFortuneWheel(\n  // changing the return animation when the user stops dragging\n  physics: CircularPanPhysics(\n    duration: Duration(seconds: 1),\n    curve: Curves.decelerate,\n  ),\n  onFling: () {\n    controller.add(1);\n  }\n  selected: controller.stream,\n  items: [\n    FortuneItem(child: Text('Han Solo')),\n    FortuneItem(child: Text('Yoda')),\n    FortuneItem(child: Text('Obi-Wan Kenobi')),\n  ],\n)\n```\n\n### Item Styling\n\nFortuneItems can be styled individually using their `style` property. Styling a FortuneWidget's\nitems according to a common logic is achieved by passing a [`StyleStrategy`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/StyleStrategy-class.html).\nBy default, the FortuneWheel uses the [`AlternatingStyleStrategy`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/AlternatingStyleStrategy-class.html)\nand the FortuneBar uses the [`UniformStyleStrategy`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/UniformStyleStrategy-class.html).\nAs with drag behavior, you can pass custom implementations to the `styleStrategy` property.\n\n```dart\n// styling FortuneItems individually\nFortuneWheel(\n  selected: Stream.value(0),\n  items: [\n    FortuneItem(\n      child: Text('A'),\n      style: FortuneItemStyle(\n        color: Colors.red, // \u003c-- custom circle slice fill color\n        borderColor: Colors.green, // \u003c-- custom circle slice stroke color\n        borderWidth: 3, // \u003c-- custom circle slice stroke width\n      ),\n    ),\n    FortuneItem(child: Text('B')),\n  ],\n)\n\n// common styling for all items of a FortuneWidget\nFortuneBar(\n  // using alternating item styles on a fortune bar\n  styleStrategy: AlternatingStyleStrategy(),\n  selected: Stream.value(0),\n  items: [\n    FortuneItem(child: Text('Han Solo')),\n    FortuneItem(child: Text('Yoda')),\n    FortuneItem(child: Text('Obi-Wan Kenobi')),\n  ],\n)\n```\n\n### Indicator Styling\n\nThe position indicators can be customized by passing a list of [FortuneIndicators](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/FortuneIndicator-class.html) to [`FortuneWidget.indicators`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/FortuneWidget/indicators.html). By default, the [`FortuneWheel`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/FortuneWheel-class.html) uses a [`TriangleIndicator`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/TriangleIndicator-class.html) and the [`FortuneBar`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/FortuneBar-class.html) uses a [`RectangleIndicator`](https://pub.dev/documentation/flutter_fortune_wheel/latest/flutter_fortune_wheel/RectangleIndicator-class.html). You may either pass styled versions of these existing widgets or create your own implementations, since indicators can be any kind of widget. Here is an example of using a customized indicator:\n\n```dart\nFortuneWheel(\n  selected: Stream.value(0),\n  indicators: \u003cFortuneIndicator\u003e[\n    FortuneIndicator(\n      alignment: Alignment.bottomCenter, // \u003c-- changing the position of the indicator\n      child: TriangleIndicator(\n        color: Colors.green, // \u003c-- changing the color of the indicator\n        width: 20.0, // \u003c-- changing the width of the indicator\n        height: 20.0, // \u003c-- changing the height of the indicator\n        elevation: 0, // \u003c-- changing the elevation of the indicator\n      ),\n    ),\n  ],\n  items: [\n    FortuneItem(child: Text('A'))\n    FortuneItem(child: Text('B')),\n  ],\n)\n```\n\n## Contributions\n\nContributions are much appreciated.\n\nIf you have any ideas for alternative visualizations, feel free to \n[open a pull request](https://github.com/kevlatus/flutter_fortune_wheel/pulls) or\n[raise an issue](https://github.com/kevlatus/flutter_fortune_wheel/issues).\nThe same holds for any requests regarding existing widgets.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevlatus%2Fflutter_fortune_wheel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevlatus%2Fflutter_fortune_wheel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevlatus%2Fflutter_fortune_wheel/lists"}