Custom Spin The Wheel in Flutter

In this article, we are going to make custom spin the wheel for flutter application. You can also check out flutter related articles.

We are displaying football players names in spinwheel in this flutter example. So users can spin the wheel and check who is their favourite football player. To create spin wheel with customization, we are using flutter_spinwheel package.

SpinWheel can move by two ways. First way we can move it in any clockwise/anticlockwise direction. Other way is to tap on spin wheel, SpinWheel will move. SpinWheel widget has many different properties. We can also autoplay spinwheel by giving value true to autoplay property of spinwheel widget.

hideOthers property is used to all option except selected option. We can also display border using shouldDrawBorder property. onChange callback is used to detect when spinwheel selected option has been changed. We can get selected value from this callback.

We can display choices related to question using items property of Spinwheel widget. So users can decide one from them by spin the wheel. itemCount property is used to give number of items to Spinwheel widget. We can also highlight any option by default using select property of Spinwheel widget.

 

Add required dependency in your pubspec.yaml file

flutter_spinwheel: ^0.1.0
 
 

Custom Spin The Wheel

import ‘package:flutter/material.dart’;
import ‘package:flutter_spinwheel/flutter_spinwheel.dart’;

class MySpinWheelScreen extends StatefulWidget {
@override
_MySpinWheelScreenState createState() => _MySpinWheelScreenState();
}

class _MySpinWheelScreenState extends State<MySpinWheelScreen> {

String question;
List<String> listMultipleChoices;
String answer;
int select;

@override
void initState() {
super.initState();
select = 0;
question = ‘Which football player do you like the most?’;
listMultipleChoices = [‘Ronaldo’, ‘Messi’, ‘Neymar’, ‘Ramos’, ‘Pogba’, ‘Hazard’, ‘Mbappe’, ‘Salah’];
answer = ”;
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter SpinWheel Sample’)),
body: Container(
margin: EdgeInsets.all(25),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(question,style: TextStyle(fontSize: 22, color: Colors.black, fontWeight: FontWeight.bold)),
SizedBox(height: 15),
Text(answer,style: TextStyle(fontSize: 35, color: Colors.orangeAccent,fontWeight: FontWeight.bold)),
SizedBox(height: 15),
Spinwheel(
size: 300,
items: listMultipleChoices,
select: select,
hideOthers: false,
autoPlay: false,
shouldDrawBorder: true,
onChanged: (val) {
if (this.mounted)
setState(() {
answer = val;
});
},
),
SizedBox(height: 25),
],
),
),
));
}
}

 
 
custom spin the wheel
 

Leave a Reply