spin_from_assets 1.0.0

Build spinning wheels with your business logic and designer's assets

Why Choose spin_from_assets?

spin_from_assets is a unique and visually stunning spinning wheel widget for Flutter. Unlike traditional spinning wheel packages, this package allows you to use custom assets designed by your team (images, SVGs, or Lottie animations) to create an engaging and professional look. Say goodbye to generic programmatically drawn wheels and hello to a tailored design experience!

Key Features

• Custom Assets: Supports PNG, JPG, JPEG, SVG, and Lottie animations for the wheel and indicator
• Business Logic Handled: Automatically calculates the selected item, spin duration, and more
• Highly Customizable: Adjust wheel size, spin duration, indicator size, position, and offset
• Developer-Friendly: Focus on functionality while the package handles the visuals and animations

Installation

Add the package to your pubspec.yaml:

dependencies:
  spin_from_assets: ^1.0.0

Run:

flutter pub get

How to Use

Example

Here is how you can integrate spin_from_assets into your Flutter app:

import 'package:example/exports.dart';

class AssetWheelScreen extends StatefulWidget {
  const AssetWheelScreen({super.key});

  @override
  State<AssetWheelScreen> createState() => _AssetWheelScreenState();
}

class _AssetWheelScreenState extends State<AssetWheelScreen> {
  late final Function({required int indexToSelect}) spinWheel;
  final SoundService soundService = SoundService();

  @override
  void initState() {
    super.initState();
    soundService.stopSpinSound();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: AssetWheelWidget(
              diameter: 300,
              itemsCount: 8,
              spinSound: AssetPathConstants.spinSound,
              selectSound: AssetPathConstants.selectSound,
              indicatorPosition: WheelIndicatorPosition.top,
              spinDurationInSeconds: 3.0,
              onItemSelected: (index) {
                debugPrint('Selected Index: $index');
                soundService.stopSpinSound();
                soundService.playSelectSound(AssetPathConstants.selectSound);
              },
              onSpinButtonPressed: (spin) {
                spinWheel = ({required int indexToSelect}) {
                  spin(indexToSelect);
                };
              },
              indicatorAsset: AssetPathConstants.indicator,
              wheelAsset: AssetPathConstants.wheel16,
              indicatorSize: 50,
              indicatorOffset: 0,
            ),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              spinWheel(indexToSelect: 1);
              soundService.playSpinSound(AssetPathConstants.spinSound);
            },
            child: const Text(TextConstants.spinWheel),
          ),
        ],
      ),
    );
  }
}

Properties

AssetWheelWidget

Property	Type	Description	Default
diameter	double	Diameter of the wheel	Required
itemsCount	int	Number of segments on the wheel	Required
wheelAsset	String	Asset path for the wheel (supports PNG, JPG, SVG, Lottie)	Required
indicatorAsset	String	Asset path for the indicator (supports PNG, JPG, SVG, Lottie)	Required
spinSound	String	Asset path for the spin sound effect	Required
selectSound	String	Asset path for the select sound effect	Required
spinDurationInSeconds	double	Duration of the spin animation	3.0
indicatorPosition	WheelIndicatorPosition	Position of the indicator (top, right, bottom, left)	WheelIndicatorPosition.top
indicatorSize	double	Size of the indicator	50.0
indicatorOffset	double	Offset of the indicator from the wheel	0.0
onSpinButtonPressed	Function(Function(int))	Callback to trigger the spin and specify the target index	Required
onItemSelected	Function(int)	Callback for the selected item index after the spin	Required

Contributing

Visit https://github.com/prash5t/spin_from_assets to explore more and further customize/contribute as you wish. :) Danke schön!