flutter_fortune_wheel 0.3.3 copy "flutter_fortune_wheel: ^0.3.3" to clipboard
flutter_fortune_wheel: ^0.3.3 copied to clipboard

outdated

Visualize (random) selection processes with widgets like a spinning wheel of fortune or a fortune bar.

Coverage Status

Flutter Fortune Wheel #

This Flutter package includes wheel of fortune widgets, which allow you to visualize random selection processes. They are highly customizable and work across mobile, desktop and the web.

You can learn more about the wheel's implementation in this article.

Quick Start #

First install the package via pub.dev. Then import and use the FortuneWheel:

import 'package:flutter/material.dart';
import 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';

FortuneWheel(
  selected: 0,
  items: [
    FortuneItem(child: Text('Han Solo')),
    FortuneItem(child: Text('Yoda')),
    FortuneItem(child: Text('Obi-Wan Kenobi')),
  ],
)

Examples #

The wheel of fortune is the most iconic visualization.

Unfortunately, a circular shape is not the best solution when vertical screen space is scarce. Therefore, the fortune bar, which is smaller in the vertical direction, is provided as an alternative. See below for an example:

import 'package:flutter/material.dart';
import 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';

FortuneBar(
  selected: 0,
  items: [
    FortuneItem(child: Text('Han Solo')),
    FortuneItem(child: Text('Yoda')),
    FortuneItem(child: Text('Obi-Wan Kenobi')),
  ],
)

Customization #

Drag Behavior #

By default, the fortune widgets react to touch and drag behavior and slowly return to their initial state upon release. This behavior can be customized using the physics property, which expects an implementation of the PanPhysics class. If you want to disable dragging, simply pass an instance of NoPanPhysics.

For the FortuneWheel, CircularPanPhysics is recommended, while the FortuneBar uses DirectionalPanPhysics.horizontal by default. If none of the available implementations, suit your needs, you can always implement a subclass of PanPhysics.

The callback passed to onFling is called when the pan physics detects a fling gesture. This gives you the opportunity to select a new random item.

int selected = 0;
FortuneWheel(
  // changing the return animation when the user stops dragging
  physics: CircularPanPhysics(
    duration: Duration(seconds: 1),
    curve: Curves.decelerate,
  ),
  onFling: () {
    selected = 1;
  }
  selected: selected,
  items: [
    FortuneItem(child: Text('Han Solo')),
    FortuneItem(child: Text('Yoda')),
    FortuneItem(child: Text('Obi-Wan Kenobi')),
  ],
)

Item Styling #

FortuneItems can be styled individually using their style property. Styling a FortuneWidget's items according to a common logic is achieved by passing a StyleStrategy. By default, the FortuneWheel uses the AlternatingStyleStrategy and the FortuneBar uses the UniformStyleStrategy. As with drag behavior, you can pass custom implementations to the styleStrategy property

FortuneBar(
  // using alternating item styles on a fortune bar
  styleStrategy: AlternatingStyleStrategy(),
  selected: 0,
  items: [
    FortuneItem(child: Text('Han Solo')),
    FortuneItem(child: Text('Yoda')),
    FortuneItem(child: Text('Obi-Wan Kenobi')),
  ],
)

Contributions #

Contributions are much appreciated.

If you have any ideas for alternative visualizations, feel free to open a pull request or raise an issue. The same holds for any requests regarding existing widgets.

269
likes
0
pub points
96%
popularity

Publisher

verified publisherkevlatus.de

Visualize (random) selection processes with widgets like a spinning wheel of fortune or a fortune bar.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, flutter_hooks, quiver

More

Packages that depend on flutter_fortune_wheel