Flutter自定义投票插件custom_polls的使用

Flutter自定义投票插件custom_polls的使用

Custom Polls

https://github.com/thisismanishrajput/custom_polls

ScreenShots

投票 尚未投票 已投票

Usage

基本用法：

import 'package:custom_polls/custom_polls.dart';

Polls(
    children: [
        // 这个不能少于2个选项，否则会抛出异常
        Polls.options(title: '开罗', value: option1),
        Polls.options(title: '麦加', value: option2),
        Polls.options(title: '丹麦', value: option3),
        Polls.options(title: '摩加迪沙', value: option4),
        ],
        question: Text('埃及的首都是哪里？'),
        currentUser: this.user,
        creatorID: this.creator,
        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;
            });
        }
    },
);

Poll View type

创建者视图：

Polls(
  viewType: PollsType.creator
);

投票者视图：

Polls(
viewType: PollsType.voter
);

只读视图：

Polls(
viewType: PollsType.readOnly
);

更多关于Flutter自定义投票插件custom_polls的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义投票插件custom_polls的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，如果你想要使用自定义的投票插件 custom_polls，首先需要确保你已经将该插件添加到项目的 pubspec.yaml 文件中。假设 custom_polls 是一个已经发布在 pub.dev 上的插件，你可以通过以下步骤来使用它。

1. 添加依赖

在你的 pubspec.yaml 文件中添加 custom_polls 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_polls: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 custom_polls 插件：

import 'package:custom_polls/custom_polls.dart';

3. 使用 CustomPolls 组件

假设 custom_polls 提供了一个 CustomPolls 组件，你可以像下面这样使用它：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Polls Example'),
      ),
      body: Center(
        child: CustomPolls(
          question: 'What is your favorite programming language?',
          options: ['Dart', 'JavaScript', 'Python', 'Java'],
          onVote: (selectedOption) {
            print('User voted for: $selectedOption');
          },
        ),
      ),
    );
  }
}

4. 自定义属性

CustomPolls 组件可能提供了一些自定义属性，比如 question（问题）、options（选项）、onVote（投票回调）等。你可以根据插件的文档来调整这些属性。

5. 处理投票逻辑

在 onVote 回调中，你可以处理用户投票的逻辑，比如将投票结果发送到服务器或者更新本地状态。

6. 运行应用

确保你的应用正常运行，并且 CustomPolls 组件能够正确显示和响应用户的投票操作。

7. 进一步自定义

如果 custom_polls 插件支持进一步的自定义（比如样式、动画等），你可以参考插件的文档来进行调整。

示例代码

以下是一个完整的示例代码：

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

void main() {
  runApp(MyApp());
}

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Polls Example'),
      ),
      body: Center(
        child: CustomPolls(
          question: 'What is your favorite programming language?',
          options: ['Dart', 'JavaScript', 'Python', 'Java'],
          onVote: (selectedOption) {
            print('User voted for: $selectedOption');
          },
        ),
      ),
    );
  }
}
回到顶部