Flutter评分对话框插件duo_rating_dialog的使用

Flutter评分对话框插件duo_rating_dialog的使用

Duo Rating Dialog🌠

A Custom Rating Dialog which allows developers to ask users for two ratings at once

一个自定义的评分对话框，允许开发者同时请求用户进行两次评分。

评分对话框示例1 评分对话框示例2

Features

增强版的 rating_dialog 插件

参数名 类型 描述
title Text 对话框的标题
ratingicon Icon 添加特定的Logo/图标
messageOne Text 对话框的第一条消息/描述文本
messageTwo Text 对话框的第二条消息/描述文本
starColor Color 星星图标和发光的颜色
starSize double 星星图标的大小
force bool 禁用取消按钮，并强制用户给出评分
showCloseButton bool 显示或隐藏关闭按钮
initialRatingOne double 第一次评分的初始值
initialRatingTwo double 第二次评分的初始值
submitButtonText String 提交按钮的文字
submitButtonTextStyle TextStyle 提交按钮的文字样式
Function(RatingDialogResponse) Function 返回包含用户评分和评论值的 RatingDialogResponse

Usage

return DuoRatingDialog(
    title: const Text('如何评价您的体验？'), // 对话框的标题
    submitButtonText: '提交', // 提交按钮的文字
    submitButtonTextStyle: const TextStyle(color: Colors.black), // 提交按钮的文字样式
    onSubmitted: (value) {
        // 提交后的回调函数

        Map<String, dynamic> ratingsOneMap = {
            "rating": value.ratingOne, // 第一次评分
            "status": value.getRatingOneStatus // 第一次评分的状态
        };
        Map<String, dynamic> ratingsTwoMap = {
            "rating": value.ratingTwo, // 第二次评分
            "status": value.getRatingTwoStatus // 第二次评分的状态
        };
        List<Map<String, dynamic>> ratingsData = [ratingsOneMap, ratingsTwoMap];

        // 导航到新页面以展示数据
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ResultsPage(ratingsData: ratingsData))
        );
    }
);

更多关于Flutter评分对话框插件duo_rating_dialog的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter评分对话框插件duo_rating_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用duo_rating_dialog插件来实现评分对话框的一个代码示例。这个插件允许你在应用中轻松地添加评分提示对话框。

首先，确保你已经在pubspec.yaml文件中添加了duo_rating_dialog依赖：

dependencies:
  flutter:
    sdk: flutter
  duo_rating_dialog: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter应用中实现评分对话框。以下是一个简单的示例代码：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RatingDialog _ratingDialog = RatingDialog(
    title: 'Rate Our App',
    message: 'We would love to hear your feedback!',
    submitButton: Text('Submit'),
    cancelButton: Text('Cancel'),
    onSubmitted: (rating, comment) {
      // 用户提交评分后的回调处理
      print('Rating: $rating, Comment: $comment');
    },
    onCancel: () {
      // 用户取消评分后的回调处理
      print('Rating dialog canceled');
    },
    listenForEvent: true, // 是否监听应用内的事件来显示对话框
    minimumRate: 1, // 最小评分
    maximumRate: 5, // 最大评分
    initialRate: null, // 初始评分（可以为null）
    showAgainDialog: (context) {
      // 当用户选择“不再显示”后，如果需要再次显示对话框，可以在这里处理
      return showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Reminder'),
          content: Text('Please rate our app to support us!'),
          actions: <Widget>[
            FlatButton(
              child: Text('Rate Now'),
              onPressed: () {
                Navigator.of(context).pop();
                _ratingDialog.show(context);
              },
            ),
            FlatButton(
              child: Text('Later'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      );
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Rating Dialog Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 手动触发评分对话框
            _ratingDialog.show(context);
          },
          child: Text('Show Rating Dialog'),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    // 在应用启动时监听事件（可选）
    _ratingDialog.init(context);
  }

  @override
  void dispose() {
    // 清理监听器（可选）
    _ratingDialog.dispose();
    super.dispose();
  }
}

在这个示例中，我们创建了一个RatingDialog实例，并在点击按钮时手动触发评分对话框。你还可以设置一些参数，如标题、消息、提交和取消按钮的文本、最小和最大评分、初始评分等。此外，listenForEvent参数允许你监听应用内的事件（如页面打开次数）来自动显示评分对话框。

请确保根据实际需求调整参数和回调处理逻辑。希望这个示例对你有所帮助！

回到顶部