rating_dialog.dart 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. library rating_dialog;
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_rating_bar/flutter_rating_bar.dart';
  4. class RatingDialog extends StatefulWidget {
  5. /// The dialog's title
  6. final Text title;
  7. /// The dialog's message/description text
  8. final Text? message;
  9. /// The top image used for the dialog to be displayed
  10. final Widget? image;
  11. /// The rating bar (star icon & glow) color
  12. final Color starColor;
  13. /// The size of the star
  14. final double starSize;
  15. /// Disables the cancel button and forces the user to leave a rating
  16. final bool force;
  17. /// Show or hide the close button
  18. final bool showCloseButton;
  19. /// The initial rating of the rating bar
  20. final double initialRating;
  21. /// Display comment input area
  22. final bool enableComment;
  23. /// The comment's TextField hint text
  24. final String commentHint;
  25. /// The submit button's label/text
  26. final String submitButtonText;
  27. /// The submit button's label/text
  28. final TextStyle submitButtonTextStyle;
  29. /// Returns a RatingDialogResponse with user's rating and comment values
  30. final Function(RatingDialogResponse) onSubmitted;
  31. /// called when user cancels/closes the dialog
  32. final Function? onCancelled;
  33. const RatingDialog({
  34. super.key,
  35. required this.title,
  36. this.message,
  37. this.image,
  38. required this.submitButtonText,
  39. this.submitButtonTextStyle = const TextStyle(fontWeight: FontWeight.bold, fontSize: 17, color: Colors.white),
  40. required this.onSubmitted,
  41. this.starColor = Colors.amber,
  42. this.starSize = 40.0,
  43. this.onCancelled,
  44. this.showCloseButton = true,
  45. this.force = false,
  46. this.initialRating = 0,
  47. this.enableComment = true,
  48. this.commentHint = 'Tell us your comments',
  49. });
  50. @override
  51. State<RatingDialog> createState() => _RatingDialogState();
  52. }
  53. class _RatingDialogState extends State<RatingDialog> {
  54. final _commentController = TextEditingController();
  55. RatingDialogResponse? _response;
  56. @override
  57. void initState() {
  58. super.initState();
  59. _response = RatingDialogResponse(rating: widget.initialRating);
  60. }
  61. @override
  62. Widget build(BuildContext context) {
  63. final content = Stack(
  64. alignment: Alignment.topRight,
  65. children: <Widget>[
  66. ClipRRect(
  67. borderRadius: BorderRadius.circular(20.0),
  68. child: Padding(
  69. padding: const EdgeInsets.fromLTRB(25, 30, 25, 5),
  70. child: Column(
  71. mainAxisSize: MainAxisSize.min,
  72. crossAxisAlignment: CrossAxisAlignment.stretch,
  73. children: <Widget>[
  74. widget.image != null ? Padding(padding: const EdgeInsets.only(top: 10, bottom: 20), child: widget.image) : Container(),
  75. widget.title,
  76. const SizedBox(height: 15),
  77. widget.message ?? Container(),
  78. const SizedBox(height: 15),
  79. FittedBox(
  80. fit: BoxFit.contain,
  81. child: RatingBar.builder(
  82. initialRating: widget.initialRating,
  83. glowColor: widget.starColor,
  84. minRating: 0,
  85. itemSize: widget.starSize,
  86. direction: Axis.horizontal,
  87. allowHalfRating: true,
  88. itemCount: 5,
  89. itemPadding: const EdgeInsets.symmetric(horizontal: 4.0),
  90. onRatingUpdate: (rating) {
  91. setState(() {
  92. _response!.rating = rating;
  93. });
  94. },
  95. itemBuilder: (context, _) => Icon(Icons.star, color: widget.starColor),
  96. ),
  97. ),
  98. widget.enableComment
  99. ? TextField(
  100. controller: _commentController,
  101. textAlign: TextAlign.center,
  102. textInputAction: TextInputAction.newline,
  103. minLines: 1,
  104. maxLines: 5,
  105. decoration: InputDecoration(hintText: widget.commentHint),
  106. )
  107. : const SizedBox(height: 15),
  108. Padding(
  109. padding: const EdgeInsets.all(20),
  110. child: ElevatedButton(
  111. style: ButtonStyle(
  112. backgroundColor: WidgetStateProperty.all<Color>(const Color(0xff8b4513)),
  113. shape: WidgetStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0))),
  114. ),
  115. onPressed: _response!.rating == 0
  116. ? null
  117. : () {
  118. if (!widget.force) Navigator.pop(context);
  119. _response!.comment = _commentController.text;
  120. widget.onSubmitted.call(_response!);
  121. },
  122. child: Text(widget.submitButtonText, style: widget.submitButtonTextStyle),
  123. ),
  124. ),
  125. ],
  126. ),
  127. ),
  128. ),
  129. if (!widget.force && widget.onCancelled != null && widget.showCloseButton) ...[
  130. IconButton(
  131. icon: const Icon(Icons.close, size: 18),
  132. onPressed: () {
  133. Navigator.pop(context);
  134. widget.onCancelled!.call();
  135. },
  136. ),
  137. ],
  138. ],
  139. );
  140. return AlertDialog(
  141. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
  142. titlePadding: EdgeInsets.zero,
  143. scrollable: true,
  144. title: content,
  145. );
  146. }
  147. }
  148. class RatingDialogResponse {
  149. /// The user's comment response
  150. String comment;
  151. /// The user's rating response
  152. double rating;
  153. RatingDialogResponse({this.rating = 0.0, this.comment = ''});
  154. }