Flutter投票与民意调查插件better_polls的使用

描述

better_polls 是一个Flutter包，用于创建和管理投票和民意调查。该包支持多种视图类型（如创建者视图、投票者视图和只读视图），并且可以通过简单的API来实现丰富的交互功能。它不仅提供了基本的投票选项设置，还允许自定义样式以适应不同的UI需求。

截图展示

投票中	未投票	已投票

使用方法

基本用法

首先需要导入 better_polls 包：

import 'package:better_polls/better_polls.dart';

接下来可以在你的页面中添加 Polls 小部件，并根据需要配置其属性。以下是一个完整的示例代码，展示了如何创建一个包含多个选项的投票界面：

import 'package:flutter/material.dart';
import 'package:better_polls/better_polls.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Polls',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PollView(),
    );
  }
}

class PollView extends StatefulWidget {
  const PollView({Key? key}) : super(key: key);

  @override
  State<PollView> 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 = 7.0;
  double option6 = 3.0;
  double option7 = 17.0;
  double option8 = 1.0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Better Polls Example")),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Polls(
            children: [
              // 这里至少需要两个选项，否则会抛出异常
              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),
            ],
            optionBarRadius: 24,
            borderWidth: 1,
            optionHeight: 50,
            optionSpacing: 12,
            question: const Padding(
              padding: EdgeInsets.only(bottom: 16.0),
              child: Text('What is your favorite place?'),
            ),
            currentUser: user,
            creatorID: creator,
            voteData: usersWhoVoted,
            userChoice: usersWhoVoted[user],
            onVoteBorderColor: Colors.deepPurple,
            voteCastedBorderColor: Colors.orange,
            onVoteBackgroundColor: Colors.blue,
            leadingBackgroundColor: Colors.lightGreen,
            backgroundColor: Colors.grey,
            voteCastedBackgroundColor: Colors.grey,
            onVote: (choice) {
              setState(() {
                usersWhoVoted[user] = choice;
              });
              switch(choice){
                case 1:
                  setState(() { option1 += 1.0; });
                  break;
                case 2:
                  setState(() { option2 += 1.0; });
                  break;
                case 3:
                  setState(() { option3 += 1.0; });
                  break;
                case 4:
                  setState(() { option4 += 1.0; });
                  break;
                case 5:
                  setState(() { option5 += 1.0; });
                  break;
                case 6:
                  setState(() { option6 += 1.0; });
                  break;
                case 7:
                  setState(() { option7 += 1.0; });
                  break;
                case 8:
                  setState(() { option8 += 1.0; });
                  break;
              }
            },
          ),
        ),
      ),
    );
  }
}

不同类型的投票视图

better_polls 支持三种不同类型的投票视图，分别是创建者视图(creator)、投票者视图(voter)和只读视图(readOnly)。你可以通过设置 viewType 属性来选择合适的视图类型：

Polls(
  viewType: PollsType.creator, // 或者 PollsType.voter 或者 PollsType.readOnly
);

以上就是 better_polls 的基本使用介绍，希望能帮助到你！如果你有任何问题或者需要进一步的帮助，请随时提问。