Flutter评分提示插件rater的使用

Flutter评分提示插件rater的使用

特性

  • 可以设置IconData，这些数据在内置的Icon类中可用。
  • 支持垂直布局。
  • 可以为每个评分设置自定义标签。

Rating({
    super.key,
    required this.onChangeRating,
    this.lables,
    this.entityWidth = 40.0,
    this.initialRating = -1,
    this.enableLable = false,
    this.iconData = Icons.star,
    this.direction = Axis.horizontal,
    this.activeColor = Colors.amber,
    this.inActiveColor = Colors.grey,
    this.rateOutOf = 5,
    this.iconSize = 30.0,
    this.entityPadding = const EdgeInsets.symmetric(horizontal: 5.0),
    this.activeLableStyle = const TextStyle(
      color: Colors.amber,
    ),
    this.inActiveLableStyle = const TextStyle(
      color: Colors.grey,
    ),
    this.verticalLabelSpace = 0.0,
  });

使用方法

导入插件

要使用此插件，请遵循以下安装说明。

使用插件

在你的Dart代码中添加以下导入：

import 'package:rater/rater.dart';

现在可以使用Rater类来添加评分组件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Rater插件示例')),
        body: Center(
          child: Rater(
            onChangeRating: (rating) {
              print(rating);
            },
            activeColor: Colors.blue,
            inActiveColor: Colors.blue.shade100,
            direction: Axis.horizontal,
            lables: ["差", "较差", "一般", "良好", "优秀"],
            enableLable: true,
            iconSize: 35,
            rateOutOf: 5,
            iconData: Icons.star,
            initialRating: 4,
            activeLableStyle: TextStyle(color: Colors.blue),
            inActiveLableStyle: TextStyle(color: Colors.grey),
            entityPadding: EdgeInsets.symmetric(horizontal: 10),
            entityWidth: 40,
            verticalLabelSpace: 10,
          ),
        ),
      ),
    );
  }
}

额外信息

如有任何缺失的功能或发现任何问题，请在此处请求或报告：GitHub Issues。

许可证

Copyright © 2023 Darshan Vanol

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

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

1 回复

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


rater 是一个用于 Flutter 的简单评分提示插件，它可以帮助你在应用中提示用户进行评分。以下是使用 rater 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 rater 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  rater: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 rater 包：

import 'package:rater/rater.dart';

3. 初始化 Rater

你可以在应用的 main 函数中初始化 Rater：

void main() {
  runApp(MyApp());
  Rater.init(
    minDays: 7,  // 至少等待7天后再提示用户评分
    minLaunches: 5,  // 至少启动应用5次后再提示用户评分
    remindDays: 3,  // 如果用户选择“稍后提醒”，3天后再提示
    remindLaunches: 2,  // 如果用户选择“稍后提醒”，2次启动后再提示
  );
}

4. 显示评分提示

在适当的时机调用 Rater.showStarRateDialog 来显示评分提示对话框。例如，你可以在用户完成某个操作后显示评分提示：

void _onSomeActionCompleted() {
  // 你的逻辑代码...
  
  // 显示评分提示
  Rater.showStarRateDialog(
    context: context,
    title: 'Enjoying the app?',  // 对话框标题
    message: 'Would you like to rate us on the App Store?',  // 对话框内容
    rateButton: 'RATE NOW',  // 评分按钮文字
    noButton: 'NO THANKS',  // 不评分按钮文字
    laterButton: 'LATER',  // 稍后提醒按钮文字
    onRatePressed: () {
      // 用户点击“评分”按钮时的回调
      // 你可以在这里执行一些操作，比如跳转到应用商店评分页面
    },
    onNoPressed: () {
      // 用户点击“不评分”按钮时的回调
    },
    onLaterPressed: () {
      // 用户点击“稍后提醒”按钮时的回调
    },
  );
}

5. 自定义样式和逻辑

你可以根据需要自定义对话框的样式和逻辑。Rater.showStarRateDialog 提供了多个参数来定制对话框的外观和行为。

6. 处理用户选择

在 onRatePressed、onNoPressed 和 onLaterPressed 回调中，你可以处理用户的选择。例如，如果用户选择“评分”，你可以跳转到应用商店的评分页面。

7. 其他功能

rater 还提供了其他一些功能，比如检查是否满足显示评分的条件：

if (Rater.shouldShowRateDialog) {
  Rater.showStarRateDialog(context: context);
}

8. 清理

如果你不再需要 rater，可以在应用的生命周期结束时进行清理：

[@override](/user/override)
void dispose() {
  Rater.dispose();
  super.dispose();
}
回到顶部