# Flutter星级评选，星级，星级排行

星级评选，星级，星级排行

整一个豆瓣的星级评选,效果图和原图如下

自己做的效果.png

豆瓣评分效果.png

一、开发步骤

首先，明确一下如何来设计这个东西。
评分系统，一看图上就有两种不同的星星，一个表层的带颜色的星星，一个底层的灰色星星。
底层的灰色星星，都是满星，而表层的带颜色的星星，有半颗的。
这时候我们就知道了，要做一个层叠在一起的两组星星，一组底层的灰色满的，一组表层的可能不是满的。

1.创建一个底层用的空的星星，或者灰色的星星 （☆）
2.创建一排底层用的星星（☆☆☆☆☆）
3.创建一个表层用的满的带颜色的星星（★）
4.创建半个表层用的带颜色的星星（★半颗）
5.将他们叠在一起

二、开始开发

现在开始开发

• 创建一个底层用的空的星星，或者灰色的星星 （☆）

Icon unSelectedStar = Icon(Icons.star_border, color: Colors.red, size: 30);

• 创建一排 5个 底层用的星星（☆☆☆☆☆）

List.generate(5, (index) {
    return Icon(Icons.star_border, color: Colors.red, size: 30);
})

• 创建一个表层用的满的带颜色的星星（★）

Icon(Icons.star, color: Colors.red, size: 30);

• 创建半个表层用的带颜色的星星（★半颗）
  半颗星星需要用到剪切，剪切这里，我们需要用到一个东西 ClipRect ，

ClipRect(
    clipper: StarCustomClipper(leftWidth),
    child: star,
);
clipper` 我们看到要传一个 `CustomClipper

CustomClipper.png

CustomClipper 又是一个抽象类，所以我们看看实现过他的子类都是什么东西。一看就发现，有两个是锁着的（