如何在Flutter开发的iOS应用中添加内置评分弹窗

实现逻辑说明 #

完全通过自定义组件实现，不调用系统评分接口也不跳转应用商店，同时通过本地存储统计应用启动次数，满足条件自动弹出。

第一步：统计应用累计启动次数 #

使用shared_preferences本地存储启动次数和弹窗弹出标记，避免重复弹出。

1. 先在pubspec.yaml中添加依赖：

dependencies:
  shared_preferences: ^2.2.2

2. 应用启动时调用如下方法判断是否需要弹出评分弹窗：

import 'package:shared_preferences/shared_preferences.dart';

Future<bool> checkShouldShowRating() async {
  final prefs = await SharedPreferences.getInstance();
  // 已弹出过评分弹窗则直接返回false
  bool hasShown = prefs.getBool('has_shown_rating_dialog') ?? false;
  if (hasShown) return false;

  // 累计启动次数+1
  int launchCount = prefs.getInt('app_launch_times') ?? 0;
  launchCount += 1;
  await prefs.setInt('app_launch_times', launchCount);

  return launchCount >= 3;
}

如果方法返回true，则触发弹窗显示。

第二步：实现自定义内部评分弹窗 #

完全自主实现弹窗UI和交互，评分数据提交到自己的业务后端，无任何应用商店跳转逻辑。
如果需要快速实现星级选择功能，可添加依赖flutter_rating_bar: ^4.0.1，也可以自己手动实现星级交互。
弹窗实现代码示例：

import 'package:flutter_rating_bar/flutter_rating_bar.dart';

void showInternalRatingDialog(BuildContext context) {
  double userRating = 0;
  String userFeedback = '';

  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) => AlertDialog(
      title: const Text('请给我们评分'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('你的反馈对我们非常重要，感谢你的支持~'),
          const SizedBox(height: 16),
          // 星级选择组件
          RatingBar.builder(
            initialRating: 0,
            minRating: 1,
            itemCount: 5,
            itemSize: 32,
            itemBuilder: (_, __) => const Icon(Icons.star, color: Colors.amber),
            onRatingUpdate: (rating) {
              userRating = rating;
            },
          ),
          const SizedBox(height: 16),
          // 反馈输入框
          TextField(
            decoration: const InputDecoration(
              hintText: '写下你的使用感受（选填）',
              border: OutlineInputBorder(),
            ),
            maxLines: 3,
            onChanged: (value) {
              userFeedback = value;
            },
          )
        ],
      ),
      actions: [
        TextButton(
          onPressed: () async {
            Navigator.pop(context);
            // 标记已弹出过，避免重复触发
            final prefs = await SharedPreferences.getInstance();
            prefs.setBool('has_shown_rating_dialog', true);
          },
          child: const Text('稍后再说'),
        ),
        ElevatedButton(
          onPressed: () async {
            // 此处调用你的业务后端接口，提交userRating和userFeedback即可
            // 提交成功后关闭弹窗并标记已弹出
            Navigator.pop(context);
            final prefs = await SharedPreferences.getInstance();
            prefs.setBool('has_shown_rating_dialog', true);
          },
          child: const Text('提交'),
        ),
      ],
    ),
  );
}

可选调整项 #

• 如果你希望用户提交低分后后续还能弹出弹窗，可以根据提交的评分值决定是否写入has_shown_rating_dialog标记
• 可以调整启动次数阈值，或者增加使用时长、完成核心操作次数等判断条件，更精准的触发评分弹窗

内容的提问来源于stack exchange，提问作者Hammas Ali