Flutter动态投票插件dynamic_polls的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter动态投票插件dynamic_polls的使用

功能

  • 可定制的投票小部件：创建具有可定制标题、选项和样式的投票。
  • 动态投票：用户可以投票并实时看到更新。
  • 重新选择选项：允许或禁止用户更改他们的投票。
  • 计时器支持：显示投票持续时间的倒计时。
  • 私密投票：创建仅特定用户可以投票的私密投票。
  • 流集成：与流集成以处理投票更新并将数据发送到服务器。

动态投票示例

DynamicPoll(
  title: '您最喜欢哪种编程语言？',
  private: false,
  allowReselection: false,
  showPercentages: false,
  showTimer: false,
  options: const [
    'Flutter',
    'JavaScript',
    'Python',
    'C#',
  ],
  totalVotes: 0,
  startDate: DateTime.now().add(const Duration(seconds: 5)),
  endDate: DateTime.now().add(const Duration(seconds: 10)),
  maximumOptions: 20,
  backgroundDecoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12.0),
    color: Colors.grey.shade100,
  ),
  heightBetweenTitleAndOptions: 20,
  votesText: '票数',
  createdBy: '创建者',
  userToVote: '投票人',
  loadingWidget: const CircularProgressIndicator(),
  voteStream: StreamController<VoteData>(),
  allStyle: Styles(
    titleStyle: TitleStyle(
      alignment: Alignment.center,
      maxLines: 2,
      minLines: 1,
      textAlign: TextAlign.center,
      textDirection: TextDirection.rtl,
      style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    ),
    optionStyle: OptionStyle(
      borderRadius: BorderRadius.circular(12),
      selectedBorderColor: Colors.blue,
      unselectedBorderColor: Colors.grey,
      borderWidth: 2.0,
      fillColor: Colors.white,
      votedCheckmark: const Icon(Icons.check, color: Colors.green),
      textSelectColor: Colors.blue,
      otherTextPercentColor: Colors.black,
      leadingVotedProgessColor: Colors.blue,
      opacityLeadingVotedProgessColor: 0.5,
      votedBackgroundColor: Colors.blue,
      voteBorderProgressColor: Colors.blue,
      progressBorderWidth: 1.0,
    ),
    votesTextStyle: VotesTextStyle(
      alignment: Alignment.center,
      paddingTop: 10,
      paddingBottom: 10,
      style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
    ),
    dateStyle: DateStyle(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      textStart: '开始于: ',
      textStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
    ),
  ),
  onOptionSelected: (index) {
    print('选中了第 $index 个选项');
  },
),

动态投票示例2

DynamicPoll(
  private: false,
  allowReselection: true,
  showPercentages: false,
  showTimer: true,
  allStyle: Styles(
    titleStyle: TitleStyle(textDirection: TextDirection.ltr, alignment: Alignment.centerLeft),
    optionStyle: OptionStyle(
      unselectedBorderColor: Colors.teal,
      votedBackgroundColor: Colors.blue.withOpacity(0.5),
      borderRadius: BorderRadius.circular(8),
      borderColor: Colors.purple,
      leadingVotedProgessColor: Colors.purple,
      height: 45,
      voteBorderProgressColor: Colors.purple,
      fillColor: Colors.white,
    ),
  ),
  title: '您最喜欢什么颜色？',
  options: const ['红色', '蓝色', '绿色', '黄色'],
  startDate: DateTime.now().add(const Duration(seconds: 7)),
  endDate: DateTime.now().add(const Duration(minutes: 4)),
  onOptionSelected: (int selectedOption) {
    if (kDebugMode) {
      print('选中了第 $selectedOption 个选项');
    }
  },
),

普通投票示例

DynamicPoll.polls(
  title: '您的年龄是多少？',
  options: ['18-25', '26-30', '31-35', '36-40', '41-45', '46-50', '51-55', '56-60', '61-65', '66-70'],
  onOptionSelected: (int index) {},
  allowReselection: false,
),

底部投票示例

DynamicPoll.radioBottomPolls(
  title: '您的年龄是多少？',
  options: const ['18-25', '26-30', '31-35', '36-40', '41-45', '46-50', '51-55', '56-60', '61-65', '66-70'],
  onOptionSelected: (int index) {},
  allowReselection: true,
  private: true,
),

只读投票示例

Padding(
  padding: const EdgeInsets.all(16.0),
  child: DynamicPolls.viewOnlyPollWidget(
    title: '您最喜欢哪种编程语言？',
    options: ['Flutter', 'JavaScript', 'Python', 'C#'],
    votes: {0: 50, 1: 30, 2: 70, 3: 40},
    totalVotes: 190,
    startDate: DateTime(2024, 11, 25, 10, 0),
    endDate: DateTime(2024, 11, 30, 18, 0),
    showPercentages: true,
    votesText: "票数",
    heightBetweenTitleAndOptions: 12,
    heightBetweenOptions: 16,
    pollOptionsHeight: 50,
    pollOptionsWidth: double.infinity,
    pollOptionsBorderRadius: BorderRadius.circular(12),
    pollOptionsFillColor: Colors.white,
    pollOptionsSplashColor: Colors.grey[300]!,
    votedProgressColor: Colors.blue,
    leadingVotedProgessColor: Colors.blueAccent,
    votedBackgroundColor: const Color(0xffEEF0EB),
    votedPercentageTextStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
    votesTextStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
  ),
),

入门指南

要使用此包，请在 pubspec.yaml 文件中添加 custom_poll 作为依赖项。

dependencies:
  custom_poll: ^0.0.5+1

然后，在 Dart 代码中导入该包：

import 'package:custom_poll/custom_poll.dart';

使用示例

以下是一个如何在 Flutter 应用程序中使用 CustomPoll 小部件的基本示例：

class MyPage extends StatefulWidget {
  [@override](/user/override)
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final voteStreamController = StreamController<VoteData>.broadcast();
  final voteNotifier = ValueNotifier<VoteData>(
    VoteData(
      totalVotes: 0, 
      optionVotes: {}, 
      percentages: {},
    )
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    voteStreamController.stream.listen((voteData) {
      // 发送投票数据到服务器
      _sendToServer(voteData);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    voteNotifier.addListener(() {
      final voteData = voteNotifier.value;
      print('总票数: ${voteData.totalVotes}');
      print('每个选项的票数: ${voteData.optionVotes}');
      print('每个选项的百分比: ${voteData.percentages}');
    });
    return Scaffold(
      body: CustomPoll(
        title: '您最喜欢哪种编程语言？',
        options: ['Flutter', 'JavaScript', 'Python', 'C#'],
        startDate: DateTime.now(),
        endDate: DateTime.now().add(Duration(hours: 24)),
        onOptionSelected: (index) {
          print('选中了第 $index 个选项');
        },
        voteStream: voteStreamController,
        voteNotifier: voteNotifier,
        // 其他参数
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    voteStreamController.dispose();
    super.dispose();
  }

  Future<void> _sendToServer(VoteData voteData) async {
    try {
      final response = await http.post(
        Uri.parse('YOUR_API_ENDPOINT'),
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode(voteData.toJson()),
      );

      if (response.statusCode == 200) {
        print('投票数据已成功发送');
      } else {
        print('发送投票数据失败');
      }
    } catch (e) {
      print('发送投票数据时出错: $e');
    }
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用dynamic_polls插件的示例代码。dynamic_polls是一个假定的插件名称，用于动态创建和管理投票。由于这是一个假设的插件，实际的插件实现和API可能会有所不同，但以下示例展示了如何使用一个类似功能的插件。

首先，确保你的Flutter项目已经创建，并且在pubspec.yaml文件中添加了dynamic_polls依赖项（请注意，这个插件是假设的，你需要替换为实际存在的插件名称和版本）：

dependencies:
  flutter:
    sdk: flutter
  dynamic_polls: ^1.0.0  # 假设的版本号，请根据实际情况调整

然后，运行flutter pub get来安装依赖项。

接下来，在你的Flutter项目中，你可以按照以下步骤使用dynamic_polls插件来动态创建和管理投票。

1. 导入插件

在你的Dart文件中（例如main.dart），首先导入插件：

import 'package:flutter/material.dart';
import 'package:dynamic_polls/dynamic_polls.dart';  // 假设的导入路径

2. 创建投票模型

假设dynamic_polls插件需要一个投票模型，你可以创建一个简单的数据类来表示投票选项：

class PollOption {
  String title;
  int votes;

  PollOption(this.title, this.votes);
}

3. 初始化投票控制器

在你的应用中，你可能需要一个控制器来管理投票的状态：

class PollController {
  List<PollOption> options = [];

  void addOption(String title) {
    options.add(PollOption(title, 0));
  }

  void vote(int index) {
    if (index >= 0 && index < options.length) {
      options[index].votes += 1;
    }
  }

  List<PollOption> getOptions() {
    return options;
  }
}

4. 创建投票界面

使用dynamic_polls插件（假设它提供了一些UI组件）来创建投票界面。如果没有UI组件，你可以自己实现：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PollScreen(),
    );
  }
}

class PollScreen extends StatefulWidget {
  @override
  _PollScreenState createState() => _PollScreenState();
}

class _PollScreenState extends State<PollScreen> {
  final PollController controller = PollController();
  final TextEditingController titleController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Polls'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: titleController,
              decoration: InputDecoration(
                labelText: 'Add Option',
              ),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                controller.addOption(titleController.text);
                titleController.clear();
                setState(() {});
              },
              child: Text('Add'),
            ),
            SizedBox(height: 24.0),
            Expanded(
              child: ListView.builder(
                itemCount: controller.getOptions().length,
                itemBuilder: (context, index) {
                  final option = controller.getOptions()[index];
                  return ListTile(
                    title: Text('${option.title} (${option.votes} votes)'),
                    trailing: IconButton(
                      icon: Icon(Icons.thumb_up),
                      onPressed: () {
                        controller.vote(index);
                        setState(() {});
                      },
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. 实际插件API：由于dynamic_polls是一个假设的插件，你需要查阅实际插件的文档来了解其API和用法。
  2. UI组件：如果dynamic_polls插件提供了UI组件，你应该直接使用它们而不是自己实现。
  3. 状态管理：对于更复杂的应用，你可能需要使用Flutter的状态管理解决方案（如Provider、Riverpod或MobX）来管理投票状态。

希望这个示例能够帮助你开始在Flutter项目中使用动态投票插件。如果你有任何其他问题，欢迎继续提问！

回到顶部