StarRating#

별 아이콘을 사용하여 평점을 입력하거나 표시하는 컴포넌트입니다. 반별(half-star), 커스텀 별 모양, 드래그 인터랙션을 지원합니다.

Live Preview#

class StarRatingDefaultExample extends StatefulComponent {
  const StarRatingDefaultExample({super.key});

  @override
  State<StarRatingDefaultExample> createState() =>
      _StarRatingDefaultExampleState();
}

class _StarRatingDefaultExampleState extends State<StarRatingDefaultExample> {
  double _value = 3;

  @override
  Component build(BuildContext context) {
    return CoStarRating(
      value: _value,
      onChanged: (v) => setState(() => _value = v),
    );
  }
}

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

  @override
  State<StarRatingDefaultExample> createState() =>
      _StarRatingDefaultExampleState();
}

class _StarRatingDefaultExampleState extends State<StarRatingDefaultExample> {
  double _value = 3;

  @override
  Widget build(BuildContext context) {
    return CoStarRating(
      value: _value,
      onChanged: (v) => setState(() => _value = v),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 상품, 서비스, 콘텐츠에 대한 사용자 만족도를 수집하는 경우
• 리뷰 섹션에서 평균 평점을 시각적으로 표시하는 경우

대신 다른 컴포넌트를 사용하세요:

• Slider: 세밀한 수치 입력이 필요한 경우
• Input: 정확한 숫자 값을 직접 입력받아야 하는 경우

기본 사용법 (Basic Usage)#

// 기본 별점 (읽기 전용)
CoStarRating(value: 3.5)

// 인터랙티브 별점
CoStarRating(
  value: rating,
  onChanged: (v) => setState(() => rating = v),
)

// 커스텀 별 모양
CoStarRating(
  value: 4,
  starPoints: 6,
  starInnerRadiusRatio: 0.5,
  activeColor: Colors.amber,
)

// 기본 별점 (읽기 전용)
CoStarRating(value: 3.5)

// 인터랙티브 별점
CoStarRating(
  value: rating,
  onChanged: (v) => setState(() => rating = v),
)

// 커스텀 별 모양
CoStarRating(
  value: 4,
  starPoints: 6,
  starInnerRadiusRatio: 0.5,
)

Props / Parameters#

동작 스펙 (Behavior)#

인터랙션#

• 클릭/탭: 클릭한 위치의 별점으로 설정
• 드래그 (Flutter): 드래그하면서 별점 실시간 변경
• 호버 (Flutter): 마우스 위치에 따라 별점 미리보기
• 키보드 (Flutter): ← → 방향키로 step 단위 증감

반별 지원#

• step: 0.5일 때 반별(half-star) 표시
• 채워진 부분과 빈 부분의 경계를 clip으로 처리

접근성 (Accessibility)#

• Web: role="slider", aria-valuenow, aria-valuemin, aria-valuemax
• Flutter: FocusableActionDetector로 키보드 접근성

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Slider: 연속적인 값 입력
• Input: 정확한 숫자 입력