Spinwheel In Flutter
A Mobile Developer is otherwise called a mobile application developer or an application developer — is somebody who plans, develops, and executes mobile applications. They are answerable for the advancement of these software applications following suitable mobile platforms.
In this article, we will explore the Spinwheel In Flutter. We will also implement a demo program of spinwheel with customization options using the flutter_spinwheel package in your flutter applications.
flutter_spinwheel | Flutter Package
A widget that outputs items (text or image) along with a pan-able circular wheel/spinner with customization options.pub.dev
Table Of Contents::
Spinwheel:
A widget that outputs things (text or picture) alongside a pannable roundabout wheel/spinner with customization alternatives. Which permits you to imagine arbitrary choice cycles. They are exceptionally adjustable and work across mobile, desktop, and the web.
Demo Module ::
This demo video shows how to use the spinwheel in a flutter. It shows how spinwheel will work using the flutter_spinwheel package in your flutter applications and shows that when you tap the item, then the spinner will move. Also, you will move the spinner in any direction clockwise/anti-clockwise. It will be shown the selected text on your device.
Features:
There are some features of spinwheel:
- Auto-play (enable/disable)
- Long-press to pause (enable/disable)
- Size adjustments
- Text/Image support
- Image tweaking support
- Clockwise and counter-clockwise pan to navigate
- Touch to navigate in the previously panned direction
- Paint customization to alter the look
- Callback function to notify selected item
Properties:
There are some properties of spinwheel are:
- > touchToRotate: This property is used to decides whether touching the spinner will make it rotate in the previously panned direction (default-clockwise).
- > itemCount: This property is used to the number of menu-items given to the spinwheel class. Should handle it in the constructor.
- > shouldDrawBorder: This property is used to determines whether should draw a border.
- > hideOthers: This property is used to determines whether should draw the shutter to hide all options except selected.
- > shutterPaint: This property is used to paint settings used for drawing the shutter if applicable. Also, it is Customizable.
- > onChanged: This property is used to the callback that returns the selected value from the spinner menu every time the selection is changed.
- > select: This property is used for the selection (highlighted) sector of the circle. The range is 0 (size of items). Imagine it just like an array. Selection numbering starts from 0.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter_spinwheel:
Step 2: Import
import 'package:flutter_spinwheel/flutter_spinwheel.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called spinwheel_demo.dart inside the lib folder.
First, we will create a two list of string given by name called questions and answers. We will create a list of the dynamic list given by name choices. Also, we will create an integer given by name select.
List<String> questions;
List<List<dynamic>> choices;
List<String> answers;
int select;
We will create an initState() method. This method will add supper initState and all variables like questions, choices, select, and answers.
@override
void initState() {
super.initState();
questions = [
'Which programming language you will use?',
];
choices = [
['Kotlin', 'Swift', 'Dart', 'Java', 'Python', 'C#', 'Ruby', 'PHP'],
];
select = 0;
answers = ['', '', ''];
}
In the body, we will add ListView.builder(). In this builder, we will add itemCount and itemBuilder. In itemBuilder, we will navigate a container widget. Inside the widget, we will add a margin, height of the container. His child property, we will add a column widget. In this widget, we will add two texts was questions and answers.
ListView.builder(
itemCount: 1,
itemBuilder: (context, index) => Container(
margin: EdgeInsets.all(30.0),
height: MediaQuery.of(context).size.height / 1.7,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(questions[index],style: TextStyle(fontSize: 18,
color: Colors.black, fontWeight: FontWeight.bold),),
Text(answers[index],style: TextStyle(fontSize: 30,
color: Colors.cyanAccent,fontWeight: FontWeight.bold),),
Center(
child: Spinwheel(
size: MediaQuery.of(context).size.height*0.6,
items: choices[index][0] is String
? choices[index].cast<String>()
: null,
select: select,
autoPlay: false,
hideOthers: false,
shouldDrawBorder: true,
onChanged: (val) {
if (this.mounted)
setState(() {
answers[index] = val;
});
},
),
)
],
),
),
)),
Now, we will add a Spinwheel() package. In this package, we will add size means the square on which will draw the circular spinner, items mean will show that on the spinner. Each will get an equally separated sector of the circle; select means the position of the selection (highlighted) sector of the circle, autoPlay means set to true to autoplay, hideOthers means determines whether should draw the shutter to hide all options except selected, shouldDrawBorder means determines whether should draw a border, onChanged means the callback that returns the selected value from the spinner menu every time the selection is changed. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_spinwheel/flutter_spinwheel.dart';
class SpinWheelDemo extends StatefulWidget {
@override
_SpinWheelDemoState createState() => _SpinWheelDemoState();
}
class _SpinWheelDemoState extends State<SpinWheelDemo> {
List<String> questions;
List<List<dynamic>> choices;
List<String> answers;
int select;
@override
void initState() {
super.initState();
questions = [
'Which programming language you will use?',
];
choices = [
['Kotlin', 'Swift', 'Dart', 'Java', 'Python', 'C#', 'Ruby', 'PHP'],
];
select = 0;
answers = ['', '', ''];
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[200],
appBar: AppBar(
title: Text('Flutter SpinWheel Demo '),
automaticallyImplyLeading: false,
),
body: Scrollbar(
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) => Container(
margin: EdgeInsets.all(30.0),
height: MediaQuery.of(context).size.height / 1.7,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(questions[index],style: TextStyle(fontSize: 18,
color: Colors.black, fontWeight: FontWeight.bold),),
Text(answers[index],style: TextStyle(fontSize: 30,
color: Colors.cyanAccent,fontWeight: FontWeight.bold),),
Center(
child: Spinwheel(
size: MediaQuery.of(context).size.height*0.6,
items: choices[index][0] is String
? choices[index].cast<String>()
: null,
select: select,
autoPlay: false,
hideOthers: false,
shouldDrawBorder: true,
onChanged: (val) {
if (this.mounted)
setState(() {
answers[index] = val;
});
},
),
)
],
),
),
)),
),
);
}
}
Conclusion:
In the article, I have explained the Spinwheel basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Spinwheel On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Spinwheel in your flutter projects. We will show you what the Spinwheel is?. Some spinwheel properties, features, make a demo program for working Spinwheel and show a wheel/spinner with customization options. This allows you to visualize random selection processes using the flutter_spinwheel package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Spinwheel Demo:
flutter-devs/flutter_spinwheel_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
