Flutter Fortune Wheel

Instead of styling items individually, you can use a StyleStrategy to provide a consistent or algorithmic look to the entire wheel. A strategy implements getItemStyle(ThemeData theme, int index, int itemCount), allowing the style to change based on the item's position or the total number of items.

Available Strategies

1. UniformStyleStrategy

Applies the same style to every item. It uses provided properties or falls back to the current ThemeData (using primaryColor for borders and a 0.3 opacity version of the primary color for backgrounds).

2. AlternatingStyleStrategy

Creates an alternating pattern using the ThemeData.primaryColor. Even-indexed items are rendered at 0.5 opacity, and odd-indexed items use the full color. If the total item count is odd, the first item is adjusted to 0.75 opacity to maintain visual balance.

Handling Disabled Items

Both strategies can implement DisableAwareStyleStrategy by providing a list of disabledIndices. When an index is in this list, the strategy will return a disabled style instead of the regular one.

// Example using UniformStyleStrategy
const strategy = UniformStyleStrategy(
  color: Colors.red,
  disabledIndices: [2, 5],
);

// Example using AlternatingStyleStrategy
const strategy = AlternatingStyleStrategy(
  disabledIndices: [1],
);

You can style items in two ways:

1. Individual Styling: Pass a FortuneItemStyle to the style property of a specific FortuneItem.
2. Common Styling: Use the styleStrategy property on the parent widget (e.g., FortuneWheel or FortuneBar) to apply a logic to all items.
   • FortuneWheel defaults to AlternatingStyleStrategy().
   • FortuneBar defaults to UniformStyleStrategy().
   • You can provide custom implementations of StyleStrategy to extend this.

// styling FortuneItems individually
FortuneWheel(
  selected: Stream.value(0),
  items: [
    FortuneItem(
      child: Text('A'),
      style: FortuneItemStyle(
        color: Colors.red, // <-- custom circle slice fill color
        borderColor: Colors.green, // <-- custom circle slice stroke color
        borderWidth: 3, // <-- custom circle slice stroke width
      ),
    ),
    FortuneItem(child: Text('B')),
  ],
)

// common styling for all items of a FortuneWidget
FortuneBar(
  // using alternating item styles on a fortune bar
  styleStrategy: AlternatingStyleStrategy(),
  selected: Stream.value(0),
  items: [
    FortuneItem(child: Text('Han Solo')),
    FortuneItem(child: Text('Yoda')),
    FortuneItem(child: Text('Obi-Wan Kenobi')),
  ],
)

Indicators mark the selected position. You can customize them by passing a list of FortuneIndicator objects to the indicators property of a FortuneWidget.

• Default Wheel Indicator: TriangleIndicator.
• Default Bar Indicator: RectangleIndicator.

Each FortuneIndicator allows you to specify an alignment and a child (which can be a styled version of an existing indicator or a completely custom widget).

FortuneWheel(
  selected: Stream.value(0),
  indicators: <FortuneIndicator>[
    FortuneIndicator(
      alignment: Alignment.bottomCenter, // <-- changing the position of the indicator
      child: TriangleIndicator(
        color: Colors.green, // <-- changing the color of the indicator
        width: 20.0, // <-- changing the width of the indicator
        height: 20.0, // <-- changing the height of the indicator
        elevation: 0, // <-- changing the elevation of the indicator
      ),
    ),
  ],
  items: [
    FortuneItem(child: Text('A')),
    FortuneItem(child: Text('B')),
  ],
)

The physics property allows you to control how the widget reacts to touch and drag input. It expects an implementation of the PanPhysics class.

• Disable dragging: Pass NoPanPhysics().
• FortuneWheel recommendation: Use CircularPanPhysics().
• FortuneBar recommendation: Uses DirectionalPanPhysics.horizontal by default.

You can also use the onFling callback to trigger a new selection when a user performs a fling gesture.

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