Explore Polls Widget In Flutter
Have you at any point been going to build a survey or possibly a Twitter poll resemble the other? Well, if you have, amazing! Be that as it may, if you haven’t or need to gain some new useful knowledge. I prefer to show you a flutter package that is constantly a flutter widget that essentially shows your voting data in a Twitter poll that resembles the other the same widget.
In this blog, we will Explore Polls Widget In Flutter. We will implement the polls widget demo program, show your voting data, and visualize a Twitter poll look alike using the polls package in your flutter applications.
polls | Flutter Package
GitHub Basic: import ‘package:polls/polls.dart’; Polls( children: [ // This cannot be less than 2, else will throw an…pub.dev
Table Of Contents::
Introduction:
A flutter widget for the poll imitates the Twitter polls framework. All you need do is associate your information with the polls; it permits casting voting and perception. Below demo video shows how to create a polls widget in a flutter. It shows how the polls widget will work using the polls package in your flutter applications. It shows your voting data, and when the user chooses an option, then the background color was changed and highlighted. It will be shown on your device.
Demo Module :
Properties:
There are some properties of polls widget are:
- > question: This property is used to this takes the question on the poll.
- > voteData: This property is used to take in vote data which should be a Map; with this, the polls widget determines what type of view the user should see.
- > onVote: This property is used to this callback returns user choice after voting.
- > onVoteBackgroundColor: This property is used to add background-color. When the user taps the poll, then the color will show.
- > children: This property is used to this takes in the poll options array.
- > allowCreatorVote: This property is used to this determines if the creator of the poll can vote or not.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
polls:
Step 2: Import
import 'package:flutter_polls_demo/polls_demo.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called polls_demo.dart inside the lib folder.
First, we will create a four double variable based on the poll’s question, which should come dynamically from a database or API.
double option1 = 2.0;
double option2 = 1.0;
double option3 = 4.0;
double option4 = 3.0;
We will add a string user ”user@gmail.com,” which holds the current user logged in. We will add a usersWhoVoted mean a Map datatype which holds the users who have voted and their choices. The user’s email is the key, and their choice option is the value. We will add a String creator, “admin@gmail.com,” which means the polls’ creator; we’ll use this to identify what the view of the polls should be.
String user = "user@gmail.com";
Map usersWhoVoted = {'test@gmail.com': 1, 'deny@gmail.com' : 3, 'kent@gmail.com' : 2,
'xyz@gmail.com' : 3};
String creator = "admin@gmail.com";
In the body, we will add the Polls widget. In this widget, we will add children, which takes in PollsOption, PollsOptions takes in title and values. We will add a question mean takes in a text widget of the question, currentUser mean add a String of user email id.
Polls(
children: [
Polls.options(title: 'Java', value: option1),
Polls.options(title: 'Kotlin', value: option2),
Polls.options(title: 'Flutter', value: option3),
Polls.options(title: 'React Native', value: option4),
],
question: Text('Which Andriod App Development technology used?',
style: TextStyle(fontSize: 17),),
currentUser: this.user,
creatorID: this.creator,
voteData: usersWhoVoted,
userChoice: usersWhoVoted[this.user],
onVoteBackgroundColor: Colors.cyan,
leadingBackgroundColor: Colors.cyan,
backgroundColor: Colors.white,
onVote: (choice) {
print(choice);
setState(() {
this.usersWhoVoted[this.user] = choice;
});
if (choice == 1) {
setState(() {
option1 += 1.0;
});
}
if (choice == 2) {
setState(() {
option2 += 1.0;
});
}
if (choice == 3) {
setState(() {
option3 += 1.0;
});
}
if (choice == 4) {
setState(() {
option4 += 1.0;
});
}
},
),
We will add voteData means, which should be a Map with this, polls widget determines what type of view the user should see. We will add userChoice mean takes in the current user choice, so if this user already voted, this will tell the widget which option the user chose. We will add onVoteBackgroundColor means add a background color. When the user taps the poll, then the color will show, leadingBackgroundColor mean add background-color. When the user taps the poll, the highest voting color will show, and backgroundColor is given to the progress stroke bar. onVote means this is a callback that returns the voter’s choice when he casts a vote; with this, you can save it to your database or send it to an API. 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:polls/polls.dart';
class PollsDemo extends StatefulWidget {
@override
_PollsDemoState createState() => _PollsDemoState();
}
class _PollsDemoState extends State<PollsDemo> {
double option1 = 2.0;
double option2 = 1.0;
double option3 = 4.0;
double option4 = 3.0;
String user = "user@gmail.com";
Map usersWhoVoted = {'test@gmail.com': 1, 'deny@gmail.com' : 3, 'kent@gmail.com' : 2,
'xyz@gmail.com' : 3};
String creator = "admin@gmail.com";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Polls Widget Demo"),
automaticallyImplyLeading: false,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Polls(
children: [
Polls.options(title: 'Java', value: option1),
Polls.options(title: 'Kotlin', value: option2),
Polls.options(title: 'Flutter', value: option3),
Polls.options(title: 'React Native', value: option4),
],
question: Text('Which Andriod App Development technology used?',
style: TextStyle(fontSize: 17),
),
currentUser: this.user,
creatorID: this.creator,
voteData: usersWhoVoted,
userChoice: usersWhoVoted[this.user],
onVoteBackgroundColor: Colors.cyan,
leadingBackgroundColor: Colors.cyan,
backgroundColor: Colors.white,
onVote: (choice) {
print(choice);
setState(() {
this.usersWhoVoted[this.user] = choice;
});
if (choice == 1) {
setState(() {
option1 += 1.0;
});
}
if (choice == 2) {
setState(() {
option2 += 1.0;
});
}
if (choice == 3) {
setState(() {
option3 += 1.0;
});
}
if (choice == 4) {
setState(() {
option4 += 1.0;
});
}
},
),
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Polls Widget basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Polls Widget 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 Polls Widget in your flutter projects. We will show you what the Introduction is?. Some polls widget properties, make a demo program for working Polls Widget, and show your voting data. When the user chooses an option, the background color was changed and highlighted using the polls 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 Polls Widget Demo:
flutter-devs/flutter_polls_widget_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.
