Flutter Spin Wheel Custom Rotate Animation

Last updated Apr 04, 2021

In 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

 

Flutter Spin wheel example

 

Tags: Spin wheel flutter, Fortune wheel

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

4563 Views