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 #

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 #

1. Add the package to your pubspec.yaml
2. Import the package in your Dart file
3. Add the FivePointedStar widget to your widget tree
4. 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.