套件詳情v1.1.0

easy_stars

一個功能完整的 Flutter 套件，用於評分與評論星號，支援進階自訂、動畫效果與彈性佈局。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 1530
喜歡數: 8
Pub 分數: 160

安裝套件

flutter pub add easy_stars

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

Easy Stars 是一個 Flutter 套件，旨在簡化評分與評論星號元件的實作。它提供廣泛的自訂選項、順暢的動畫以及彈性的版面配置，適用於單一與互動式星號評分。開發者可以輕鬆地以最少的程式碼將視覺上吸引人的星號元件整合到應用程式中。此套件支援所有主要平台，包括行動裝置、網頁與桌面端，非常適合需要使用者回饋機制的跨平台應用程式。

適用情境

用戶在電子商務應用中的評論
社交媒體平台中的評分系統
生產力工具中的反饋收集
帶星號輸入的互動式表單
應用商店風格的評分顯示

主要特色

可自定的星星外觀
流暢的動畫效果
靈活的佈局選項
支援半星評分
跨平台相容性
互動式觸控回饋

適合對象

開發反饋密集型應用的開發者
需要精緻UI元件的設計人員
需要響應式星標小部件的項目
針對多個平台的應用
優先考慮快速UI開發的團隊

使用建議

可能需要為複雜主題添加額外的樣式
大量星星帶來的效能影響
有限的內建驗證，僅限基本評分
依賴 Flutter 的手勢系統實現互動
未針對極高頻率的更新進行優化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

✨ Easy Stars: Your Flutter Rating Solution! ✨

Add a touch of sparkle to your Flutter app with Easy Stars — the all-in-one solution for elegant and customizable rating widgets.

🚀 Getting Started

Add to your pubspec.yaml:

dependencies:
  easy_stars: ^1.0.3

Then:

flutter pub get

💡 Example Usage

Below are rich examples showcasing the versatility of Easy Stars:

1️⃣ Basic Ratings

🌟 Basic 5-Star Rating

EasyStarsRating(
  initialRating: 3.0,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

⭐ Half-Star Rating

EasyStarsRating(
  initialRating: 2.5,
  allowHalfRating: true,
  filledColor: Colors.orange,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

✅ Read-Only Display

EasyStarsDisplay(
  initialRating: 4.2,
  readOnly: true,
  filledColor: Colors.green,
)

2️⃣ Animations

💫 Scale Animation

EasyStarsRating(
  initialRating: 4.0,
  animationConfig: StarAnimationConfig.scale,
  filledColor: Colors.purple,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

💫 Bounce Animation

EasyStarsRating(
  initialRating: 3.0,
  animationConfig: StarAnimationConfig.bounce,
  filledColor: Colors.blue,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

💫 Rotation Animation

EasyStarsRating(
  initialRating: 4.0,
  animationConfig: StarAnimationConfig.rotate,
  filledColor: Colors.red,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

💫 Pulse Animation

EasyStarsRating(
  initialRating: 3.5,
  animationConfig: StarAnimationConfig.pulse,
  filledColor: Colors.pink,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

3️⃣ Arrangements

🌀 Arc Arrangement

EasyStarsRating(
  initialRating: 4.0,
  starCount: 7,
  arrangement: StarArrangement.arc,
  arrangementRadius: 80,
  filledColor: Colors.orange,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🟦 Grid Arrangement

EasyStarsRating(
  initialRating: 3.0,
  arrangement: StarArrangement.grid,
  gridColumns: 3,
  filledColor: Colors.indigo,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🌊 Wave Arrangement

EasyStarsRating(
  initialRating: 3.5,
  arrangement: StarArrangement.wave,
  waveAmplitude: 15,
  filledColor: Colors.cyan,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🌀 Spiral Arrangement

EasyStarsRating(
  initialRating: 4.0,
  arrangement: StarArrangement.spiral,
  arrangementRadius: 50,
  filledColor: Colors.deepOrange,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

4️⃣ Custom Shapes & Colors

Custom

❤️ Heart Shape

EasyStarsRating(
  initialRating: 3.5,
  starShape: StarShape.heart,
  filledColor: Colors.red,
  emptyColor: Colors.pink.shade100,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🎨 Gradient Colors

EasyStarsRating(
  initialRating: 3.3,
  gradientColors: [Colors.yellow, Colors.orange, Colors.red],
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

⭐ Custom Icons

EasyStarsRating(
  initialRating: 3.6,
  customIcons: [
    Icons.favorite,
    Icons.star,
    Icons.thumb_up,
    Icons.mood,
    Icons.emoji_events,
  ],
  customColors: [
    Colors.red,
    Colors.amber,
    Colors.blue,
    Colors.green,
    Colors.purple,
  ],
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

5️⃣ Advanced Features

🔹 Size Variants

Row(
  children: [
    EasyStarsRating(
      initialRating: 3.0,
      sizeVariant: StarSizeVariant.small,
    ),
    EasyStarsRating(
      initialRating: 3.0,
      sizeVariant: StarSizeVariant.medium,
    ),
    EasyStarsRating(
      initialRating: 3.0,
      sizeVariant: StarSizeVariant.large,
    ),
  ],
)

🔹 Shadow Effect

EasyStarsRating(
  initialRating: 4.0,
  starShadow: BoxShadow(
    color: Colors.black26,
    blurRadius: 2,
    offset: Offset(1, 1),
  ),
  filledColor: Colors.amber,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🔹 Rotated Arrangement

EasyStarsRating(
  initialRating: 3.5,
  arrangementRotation: 0.2,
  filledColor: Colors.purple,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

6️⃣ Interactions

🟢 Drag Interaction

EasyStarsRating(
  initialRating: 2.9,
  dragSensitivity: DragSensitivity.high,
  animationConfig: StarAnimationConfig.scale,
  filledColor: Colors.deepPurple,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🟤 Clearable Rating

EasyStarsRating(
  initialRating: 3.0,
  allowClear: true,
  filledColor: Colors.brown,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🟢 Vertical Layout

EasyStarsRating(
  initialRating: 4.0,
  direction: StarDirection.vertical,
  spacing: 8,
  filledColor: Colors.lime,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

7️⃣ Emojis

Emojis

😊 Discrete Emoji Rating

EasyStarsEmoji(
  initialRating: 4.5,
  showRatingText: true,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

😍 Emoji Slider

EasyStarsEmojiSlider(
  initialRating: 4.5,
  showRatingText: true,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

🤩 Custom Emojis

EasyStarsEmoji(
  initialRating: 4.0,
  customEmojis: ['😡', '😔', '😑', '😃', '🤩'],
  showRatingText: true,
  onRatingChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
)

8️⃣ Bottom Sheet

EasyStarsReviewBottomSheet.show(
                  context: context,
                  title: 'Advanced Review',
                  subtitle: 'Tell us about your detailed experience',
                  initialRating: 0.0,
                  reviewType: ReviewType.stars,
                  allowModeSwitch: true,
                  allowHalfRating: true,
                  isCommentRequired: true,
                  minCharacters: 10,
                  maxCharacters: 300,
                  showRatingLabels: true,
                  animationConfig: StarAnimationConfig.bounce,
                  filledColor: Colors.orange,
                  emptyColor: Colors.grey.shade300,
                  starCount: 5,
                  ratingSize: 36.0,
                  customRatingLabels: ['Terrible', 'Poor', 'Okay', 'Good', 'Amazing'],
                  hintText: 'Please share your detailed feedback...',
                  headerWidgets: [
                    Card(
                      color: Colors.orange.shade50,
                      child: const Padding(
                        padding: EdgeInsets.all(12.0),
                        child: Row(
                          children: [
                            Icon(Icons.shopping_bag, color: Colors.orange),
                            SizedBox(width: 8),
                            Text(
                              'Product: Easy Stars Package',
                              style: TextStyle(fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                  footerWidgets: [
                    CheckboxListTile(
                      title: const Text('Recommend to others'),
                      subtitle: const Text('Would you recommend this to friends?'),
                      value: true,
                      onChanged: (value) {},
                      dense: true,
                    ),
                  ],
                );

📚 Additional Resources

📁 Explore the example/ directory for full implementation
💬 Contribute on GitHub
🐛 Found a bug? Open an issue

🏁 License

✨ Let your stars shine with Easy Stars! ✨

所屬分類

回饋

原始碼儲存庫

Piyu-Pika/easy_stars

easy_stars

☆ 1 星標⑂ 0 分支

Dart

使用此套件的專案

暫無相關資料。