Five Pointed Star

A customizable Flutter widget for creating interactive five-pointed star rating controls. Perfect for rating systems, reviews, and user feedback interfaces.

Features

⭐ Interactive Star Rating: Tap to select stars with smooth visual feedback
🎨 Customizable Appearance: Custom colors, sizes, and spacing
🔧 Flexible Configuration: Adjustable star count, default selection, and disabled state
📱 Responsive Design: Works seamlessly on both mobile and desktop
🎯 Easy Integration: Simple API with callback support

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  five_pointed_star: ^1.0.3

Then run:

flutter pub get

Usage

Basic Example

import 'package:five_pointed_star/five_pointed_star.dart';

FivePointedStar(
  count: 5,
  onChange: (selectedCount) {
    print('Selected $selectedCount stars');
  },
)

Advanced Configuration

FivePointedStar(
  count: 5,                           // Number of stars (default: 5)
  size: Size(32, 32),                // Size of each star (default: 24x24)
  gap: 8,                            // Gap between stars (default: 4)
  color: Colors.grey[300]!,          // Unselected star color
  selectedColor: Colors.amber,       // Selected star color
  defaultSelectedCount: 3,           // Initial selection (default: 0)
  disabled: false,                   // Disable interaction (default: false)
  onChange: (selectedCount) {
    // Handle selection change
    print('Rating: $selectedCount stars');
  },
)

API Reference

FivePointedStar Properties

Property	Type	Default	Description
`count`	`int`	`5`	Number of stars to display
`size`	`Size`	`Size(24, 24)`	Size of each individual star
`gap`	`double`	`4`	Horizontal spacing between stars
`color`	`Color`	`Color.fromRGBO(200, 200, 200, 1)`	Color for unselected stars
`selectedColor`	`Color`	`Color.fromRGBO(255, 96, 10, 1)`	Color for selected stars
`defaultSelectedCount`	`int`	`0`	Initial number of selected stars
`disabled`	`bool`	`false`	Whether the widget is interactive
`onChange`	`void Function(int)?`	`null`	Callback when selection changes

Examples

Different Star Counts

// 3-star rating
FivePointedStar(count: 3)

// 7-star rating  
FivePointedStar(count: 7)

// 10-star rating
FivePointedStar(count: 10)

Custom Styling

FivePointedStar(
  count: 5,
  size: Size(40, 40),
  gap: 12,
  color: Colors.grey[400]!,
  selectedColor: Colors.purple,
  onChange: (rating) {
    // Handle rating
  },
)

Disabled State

FivePointedStar(
  count: 5,
  disabled: true,
  defaultSelectedCount: 4,
  // onChange won't be called when disabled
)

With Default Selection

FivePointedStar(
  count: 5,
  defaultSelectedCount: 3, // Start with 3 stars selected
  onChange: (rating) {
    // Handle changes from the initial selection
  },
)

Screenshots

The example app demonstrates various configurations and use cases:

Basic star rating
Custom colors and sizes
Different star counts
Disabled state
Default selections

Getting Started

Add the package to your pubspec.yaml
Import the package in your Dart file
Add the FivePointedStar widget to your widget tree
Handle the onChange callback to respond to user selections

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Additional Information

This package provides a simple yet powerful way to implement star rating systems in your Flutter applications. The widget is built using Flutter's CustomPainter for optimal performance and smooth animations.