Flutter应用评分引导插件phoenix_appraise的使用

描述

phoenix_appraise 是一个用于 Flutter 应用的评分和反馈引导插件。它提供了多种评分方式，如星级评分、表情列表等，帮助开发者快速集成用户评分功能。

特性

• 支持星级评分。
• 提供表情列表选择。
• 自定义标题和标签。
• 灵活的弹窗样式。

开始使用

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  phoenix_appraise: ^1.0.0

运行以下命令安装依赖：

flutter pub get

示例代码

主文件 (main.dart)

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Phoenix Appraise Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });

    // 显示星级评分弹窗
    AppraiseStarListView starListView = AppraiseStarListView(
      titles: ['1', '2', '3'],
      count: 3,
    );
    showDialog(context: context, builder: (context) => starListView);

    // 显示表情列表弹窗
    AppraiseEmojiListView emojiListView = AppraiseEmojiListView(
      indexes: const [0, 1, 2, 3, 4],
      titles: const ['1', '2', '3', '4', '5'],
    );
    showDialog(
      context: context,
      builder: (context) => emojiListView,
    );

    // 显示选择器弹窗
    AppraiseBottomPicker bottomPicker = AppraiseBottomPicker(
      title: '选择器',
      tags: const ['tag01', 'tag02', 'tag03', 'tag04'],
    );
    showDialog(context: context, builder: (ctx) => bottomPicker);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('你点击了按钮多少次:'),
            Text('$_counter', style: Theme.of(context).textTheme.headlineMedium),
            AppraiseStarListView(
              titles: ['1', '2', '3'],
              count: 3,
            ),
            AppraiseEmojiListView(
              indexes: const [0, 1, 2, 3, 4],
              titles: const ['1', '2', '3', '4', '5'],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加次数',
        child: const Icon(Icons.add),
      ),
    );
  }
}

功能详解

星级评分 (AppraiseStarListView)

AppraiseStarListView 是一个用于展示星级评分的控件。用户可以选择从 1 到指定数量的星星。

参数说明

• titles: 星星对应的标签数组。
• count: 星星的数量。

示例代码

AppraiseStarListView(
  titles: ['1', '2', '3'],
  count: 3,
)

表情列表 (AppraiseEmojiListView)

AppraiseEmojiListView 是一个用于展示表情列表的控件。用户可以从多个表情中选择一个。

参数说明

• indexes: 表情对应的索引数组。
• titles: 表情对应的标签数组。

示例代码

AppraiseEmojiListView(
  indexes: const [0, 1, 2, 3, 4],
  titles: const ['1', '2', '3', '4', '5'],
)

选择器 (AppraiseBottomPicker)

AppraiseBottomPicker 是一个底部弹出的选择器，用户可以从多个标签中选择一个。

参数说明

• title: 弹窗标题。
• tags: 可选标签数组。

示例代码

AppraiseBottomPicker(
  title: '选择器',
  tags: const ['tag01', 'tag02', 'tag03', 'tag04'],
)