Flutter任务清单与评分插件checklist_rating的使用

Flutter任务清单与评分插件checklist_rating的使用

checklist_rating 是一个用于在 Flutter 应用程序中提供可自定义的任务清单评分小部件的插件。

安装

首先，在 pubspec.yaml 文件中添加 checklist_rating 依赖项：

dependencies:
  checklist_rating: ^0.0.7

然后运行以下命令以获取依赖项：

flutter pub get

使用

要使用 ChecklistRating 小部件，你需要先导入该包：

import 'package:checklist_rating/checklist_rating.dart';

下面是如何将 ChecklistRating 集成到你的 Flutter 应用程序中的示例：

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int rating = 0;
  bool isChecked = false;

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Checklist Rating Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ChecklistRating.custom(
                  titleChekbox: "Sample Checklist",
                  onCheckboxChanged: (value) {
                    // 处理任务清单更改
                    setState(() {
                      isChecked = value ?? false;
                    });
                  },
                  setRating: rating,
                  setChecked: isChecked,
                  maxRatings: 5,
                  onRatingChecked: (rating) {
                    // 处理评分更改
                    setState(() {
                      this.rating = rating;
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

示例如何使用 checklist_rating

要使用 ChecklistRating 小部件，你首先需要导入上述代码中的包。以下是完整的示例代码，展示了如何在 Flutter 应用程序中集成 ChecklistRating 小部件：

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int rating = 0;
  bool isChecked = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Checklist Rating Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ChecklistRating.custom(
                  titleChekbox: "Sample Checklist",
                  onCheckboxChanged: (value) {
                    // 处理任务清单更改
                    setState(() {
                      isChecked = value ?? false;
                    });
                  },
                  setRating: rating,
                  setChecked: isChecked,
                  maxRatings: 5,
                  onRatingChecked: (rating) {
                    // 处理评分更改
                    setState(() {
                      this.rating = rating;
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}