flutter_custom_roulette 0.0.2

A highly customizable Flutter roulette wheel with weight-based probability, SVG support, and flexible theming.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6C63FF)),
        useMaterial3: true,
      ),
      home: const RouletteExamplePage(),
    );
  }
}

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

  @override
  State<RouletteExamplePage> createState() => _RouletteExamplePageState();
}

class _RouletteExamplePageState extends State<RouletteExamplePage> {
  final _controller = RouletteController();
  String _resultLabel = '';
  String _resultEmoji = '🎰';

  static const _items = [
    RouletteItem(
      label: 'Miss',
      weight: 30,
      backgroundColor: Color(0xFFEEEEEE),
      labelColor: Color(0xFF9E9E9E),
      content: Text('😢', style: TextStyle(fontSize: 28)),
      rotateWithWheel: false,
    ),
    RouletteItem(
      label: '\$10',
      weight: 25,
      backgroundColor: Color(0xFFE3F2FD),
      labelColor: Color(0xFF1565C0),
      content: Text('💵', style: TextStyle(fontSize: 28)),
      rotateWithWheel: false,
    ),
    RouletteItem(
      label: '\$50',
      weight: 20,
      backgroundColor: Color(0xFFE8F5E9),
      labelColor: Color(0xFF2E7D32),
      content: Text('💰', style: TextStyle(fontSize: 28)),
      rotateWithWheel: false,
    ),
    RouletteItem(
      label: '\$100',
      weight: 12,
      backgroundColor: Color(0xFFFFF3E0),
      labelColor: Color(0xFFE65100),
      content: Text('🤑', style: TextStyle(fontSize: 28)),
      rotateWithWheel: false,
    ),
    RouletteItem(
      label: 'x2',
      weight: 8,
      backgroundColor: Color(0xFFF3E5F5),
      labelColor: Color(0xFF6A1B9A),
      content: Text('✨', style: TextStyle(fontSize: 28)),
      rotateWithWheel: false,
    ),
    RouletteItem(
      label: 'Jackpot',
      weight: 5,
      backgroundColor: Color(0xFFFFF9C4),
      labelColor: Color(0xFFF9A825),
      content: Text('🏆', style: TextStyle(fontSize: 28)),
      rotateWithWheel: false,
    ),
  ];

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final result = _controller.result;
      if (result != null) {
        setState(() {
          _resultLabel = result.item.label;
          _resultEmoji = (result.item.content as Text).data ?? '🎰';
        });
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              const SizedBox(height: 48),
              const Text(
                'Spin the Wheel',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF212121),
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                'Try your luck',
                style: TextStyle(fontSize: 14, color: Color(0xFF9E9E9E)),
              ),
              const SizedBox(height: 48),
              RouletteWheel(
                items: _items,
                controller: _controller,
                size: 320,
                borderColor: Colors.purple,
                borderWidth: 5,
                itemRadius: 0.62,
                pointer: const RoulettePointer(
                  width: 26,
                  height: 36,
                  color: Colors.purple,
                ),
                pointerOffset: 0,
                centerWidget: RouletteButton(
                  controller: _controller,
                  items: _items,
                  label: 'SPIN',
                  size: 72,
                  backgroundColor: Colors.purple,
                  labelStyle: const TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.w800,
                  ),
                ),
              ),
              const SizedBox(height: 48),
              _resultLabel.isEmpty
                  ? const Text(
                      'Tap SPIN button to spin!',
                      key: ValueKey('placeholder'),
                      style: TextStyle(fontSize: 16, color: Color(0xFF9E9E9E)),
                    )
                  : Container(
                      key: ValueKey(_resultLabel),
                      padding: const EdgeInsets.symmetric(
                        horizontal: 32,
                        vertical: 16,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Color(0xFFDCDCDC), width: 2)
                      ),
                      child: Column(
                        children: [
                          Text(
                            _resultEmoji,
                            style: const TextStyle(fontSize: 40),
                          ),
                          const SizedBox(height: 8),
                          Text(
                            _resultLabel,
                            style: const TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                              color: Color(0xFF212121),
                            ),
                          ),
                        ],
                      ),
                    ),
            ],
          ),
        ),
      ),
    );
  }
}