Flutter Spin Wheel Custom Rotate Animation
Last updated Apr 04, 2021In this post we are implementing how to use spin wheel widget in flutter. For this Spin wheel example we are using the flutter_fortune_wheel plugin.
Let's get started
Step 1: Create a flutter application
Step 2: Add flutter_fortune_wheel plugin in pubspec.yaml file
Step 3: Update dart file with below code
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';
void main() {
runApp(SpinWheel());
}
class SpinWheel extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Spin Wheel Example',
home: SpinWheelPage(),
);
}
}
class SpinWheelPage extends StatefulWidget {
@override
_SpinWheelPageState createState() => _SpinWheelPageState();
}
class _SpinWheelPageState extends State<SpinWheelPage> {
int selected = 0;
int rotation_count=10;
List<int>point=[0,0,0,0,0,0,0,0];
final items = <String>[
'Team 1',
'Team 2',
'Team 3',
'Team 4',
'Team 5',
'Team 6',
'Team 7',
'Team 8',
];
@override
void initState() {
// TODO: implement initState
super.initState();
point=[0,0,0,0,0,0,0,0];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Spin Wheel - IPL'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: GestureDetector(
onTap: () {
setState(() {
selected = Random().nextInt(items.length);
point[selected]=point[selected]+1;
print("Selected value1 $selected ${point[selected]}");
});
},
child: Column(
children: [
Container(
height: 300,
child: Column(
children: [
Expanded(
child: FortuneWheel(
styleStrategy: AlternatingStyleStrategy( ),
rotationCount: rotation_count,
onFling: () => {
setState(() {
selected = Random().nextInt(items.length);
point[selected]=point[selected]+1;
print("Selected value1 $selected ${point[selected]}");
})
},
selected: selected,
items: [
for (var it in items) FortuneItem(child: Text(it)),
],
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 10,bottom: 10),
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Team",style: TextStyle(color: Colors.white,fontSize: 20,fontWeight: FontWeight.bold),),
Text("Points",style: TextStyle(color: Colors.white,fontSize: 20,fontWeight: FontWeight.bold),),
],),
),
),
ListView.builder(
shrinkWrap: true
,itemBuilder: (context,index){
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("${items[index]}",style: TextStyle(color: Colors.red,fontSize: 16,fontWeight: FontWeight.bold),),
Text("${point[index]}",style: TextStyle(color: Colors.purple,fontSize: 16,fontWeight: FontWeight.bold),),
],),
),
Divider(
height: 2,
color: Colors.blueGrey,
)
],
);
},itemCount: items.length,),
],
),
),
),
);
}
}
|
Step 4: Run application
![]() |
Tags: Spin wheel flutter, Fortune wheel
Article Contributed By :
|
|
|
|
4563 Views |