Flutter投票管理插件polls的使用

Flutter投票管理插件polls的使用

GitHub

屏幕截图

投票	尚未投票	已投票

使用

基础用法

import 'package:polls/polls.dart';

Polls(
    children: [
        // 这个列表不能少于2项，否则会抛出异常
        Polls.options(title: 'Cairo', value: option1),
        Polls.options(title: 'Mecca', value: option2),
        Polls.options(title: 'Denmark', value: option3),
        Polls.options(title: 'Mogadishu', value: option4),
    ],
    question: Text('What is the capital of Egypt'), // 问题
    currentUser: this.user, // 当前用户
    creatorID: this.creator, // 创建者ID
    voteData: usersWhoVoted, // 投票数据
    userChoice: usersWhoVoted[this.user], // 用户选择
    onVoteBackgroundColor: Colors.blue, // 投票背景颜色
    leadingBackgroundColor: Colors.blue, // 领先背景颜色
    backgroundColor: Colors.white, // 背景颜色
    onVote: (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;
            });
        }
    },
);

投票视图类型

Polls(
  viewType: PollsType.creator
);

Polls(
  viewType: PollsType.voter
);

Polls(
  viewType: PollsType.readOnly
);

我为什么制作这个插件

显然，我构建了两个需要用户投票流程的应用，两次在不同的应用中实现了相同的代码。我也将代码分享给了一位朋友。我认为将其做成一个包不会是个坏主意，因为此时在pub.dev上还没有投票小部件包。

关注我的GitHub

GitHub

关注我

Twitter Medium Instagram

示例代码

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:polls/polls.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Polls',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PollView(),
    );
  }
}

class PollView extends StatefulWidget {
  [@override](/user/override)
  _PollViewState createState() => _PollViewState();
}

class _PollViewState extends State<PollView> {

  double option1 = 1.0;
  double option2 = 0.0;
  double option3 = 1.0;
  double option4 = 1.0;
  double option5 = 1.0;
  double option6 = 3.0;
  double option7 = 2.0;
  double option8 = 1.0;

  String user = "king@mail.com";
  Map<String, dynamic> usersWhoVoted = {
    'sam@mail.com': 3,
    'mike@mail.com': 4,
    'john@mail.com': 1,
    'kenny@mail.com': 1
  };
  String creator = "eddy@mail.com";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Polls(
          children: [
            // 这个列表不能少于2项，否则会抛出异常
            Polls.options(title: 'Cairo', value: option1),
            Polls.options(title: 'Mecca', value: option2),
            Polls.options(title: 'Denmark', value: option3),
            Polls.options(title: 'Mogadishu', value: option4),
            Polls.options(title: 'Maldives', value: option5),
            Polls.options(title: 'Brazil', value: option6),
            Polls.options(title: 'Ethiopia', value: option7),
            Polls.options(title: 'Italy', value: option8),
          ],
          question: Text('How old are you?'), // 问题
          currentUser: this.user, // 当前用户
          creatorID: this.creator, // 创建者ID
          voteData: usersWhoVoted, // 投票数据
          userChoice: usersWhoVoted[this.user], // 用户选择
          onVoteBackgroundColor: Colors.blue, // 投票背景颜色
          leadingBackgroundColor: Colors.blue, // 领先背景颜色
          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;
              });
            }
            if (choice == 5) {
              setState(() {
                option5 += 1.0;
              });
            }
            if (choice == 6) {
              setState(() {
                option6 += 1.0;
              });
            }
            if (choice == 7) {
              setState(() {
                option7 += 1.0;
              });
            }
            if (choice == 8) {
              setState(() {
                option8 += 1.0;
              });
            }
          },
        ),
      ),
    );
  }
}