-
-
Save esirioneyibo/942049dd3602adb8664845e4f80065a8 to your computer and use it in GitHub Desktop.
A simple star display and interactive star rating widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
class StarDisplayWidget extends StatelessWidget { | |
final int value; | |
final Widget filledStar; | |
final Widget unfilledStar; | |
const StarDisplayWidget({ | |
Key key, | |
this.value = 0, | |
@required this.filledStar, | |
@required this.unfilledStar, | |
}) : assert(value != null), | |
super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Row( | |
mainAxisSize: MainAxisSize.min, | |
children: List.generate(5, (index) { | |
return index < value ? filledStar : unfilledStar; | |
}), | |
); | |
} | |
} | |
class StarDisplay extends StarDisplayWidget { | |
const StarDisplay({Key key, int value = 0}) | |
: super( | |
key: key, | |
value: value, | |
filledStar: const Icon(Icons.star), | |
unfilledStar: const Icon(Icons.star_border), | |
); | |
} | |
class StarRating extends StatelessWidget { | |
final void Function(int index) onChanged; | |
final int value; | |
final IconData filledStar; | |
final IconData unfilledStar; | |
const StarRating({ | |
Key key, | |
@required this.onChanged, | |
this.value = 0, | |
this.filledStar, | |
this.unfilledStar, | |
}) : assert(value != null), | |
super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
final color = Theme.of(context).accentColor; | |
final size = 36.0; | |
return Row( | |
mainAxisSize: MainAxisSize.min, | |
children: List.generate(5, (index) { | |
return IconButton( | |
onPressed: onChanged != null | |
? () { | |
onChanged(value == index + 1 ? index : index + 1); | |
} | |
: null, | |
color: index < value ? color : null, | |
iconSize: size, | |
icon: Icon( | |
index < value ? filledStar ?? Icons.star : unfilledStar ?? Icons.star_border, | |
), | |
padding: EdgeInsets.zero, | |
tooltip: "${index + 1} of 5", | |
); | |
}), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment