Improve consistency when handling colors in surveys.

Co-authored-by: Tate <wintermydog@gmail.com>

Author: kyleswank

lib/src/surveys/models/survey_appearance.dart

@@ -5,54 +5,85 @@ import 'posthog_display_survey_appearance.dart';
 @immutable
 class SurveyAppearance {
   const SurveyAppearance({
-    this.backgroundColor,
+    this.backgroundColor = Colors.white,
     this.submitButtonColor = Colors.black,
     this.submitButtonText = 'Submit',
     this.submitButtonTextColor = Colors.white,
-    this.descriptionTextColor,
-    this.ratingButtonColor,
-    this.ratingButtonActiveColor,
+    this.descriptionTextColor = Colors.black,
+    this.questionTextColor = Colors.black,
+    this.closeButtonColor = Colors.black,
+    this.ratingButtonColor = const Color(0xFFEEEEEE),
+    this.ratingButtonActiveColor = Colors.black,
+    this.ratingButtonSelectedTextColor = Colors.white,
+    this.ratingButtonUnselectedTextColor = const Color(0x80000000),
     this.displayThankYouMessage = true,
     this.thankYouMessageHeader = 'Thank you for your feedback!',
     this.thankYouMessageDescription,
     this.thankYouMessageCloseButtonText = 'Close',
-    this.borderColor,
+    this.borderColor = const Color(0xFFBDBDBD),
+    this.inputBackgroundColor = Colors.white,
+    this.inputTextColor = Colors.black,
+    this.inputPlaceholderColor = const Color(0xFF757575),
+    this.choiceButtonBorderColor = Colors.black,
+    this.choiceButtonTextColor = Colors.black,
   });
 
-  final Color? backgroundColor;
+  final Color backgroundColor;
   final Color submitButtonColor;
   final String submitButtonText;
   final Color submitButtonTextColor;
-  final Color? descriptionTextColor;
-  final Color? ratingButtonColor;
-  final Color? ratingButtonActiveColor;
+  final Color descriptionTextColor;
+  final Color questionTextColor;
+  final Color closeButtonColor;
+  final Color ratingButtonColor;
+  final Color ratingButtonActiveColor;
+  final Color ratingButtonSelectedTextColor;
+  final Color ratingButtonUnselectedTextColor;
   final bool displayThankYouMessage;
   final String thankYouMessageHeader;
   final String? thankYouMessageDescription;
   final String thankYouMessageCloseButtonText;
-  final Color? borderColor;
+  final Color borderColor;
+  final Color inputBackgroundColor;
+  final Color inputTextColor;
+  final Color inputPlaceholderColor;
+  final Color choiceButtonBorderColor;
+  final Color choiceButtonTextColor;
 
   /// Creates a [SurveyAppearance] from a [PostHogDisplaySurveyAppearance]
   static SurveyAppearance fromPostHog(
       PostHogDisplaySurveyAppearance? appearance) {
     return SurveyAppearance(
-      backgroundColor: _colorFromHex(appearance?.backgroundColor),
+      backgroundColor:
+          _colorFromHex(appearance?.backgroundColor) ?? Colors.white,
       submitButtonColor:
           _colorFromHex(appearance?.submitButtonColor) ?? Colors.black,
       submitButtonText: appearance?.submitButtonText ?? 'Submit',
       submitButtonTextColor:
           _colorFromHex(appearance?.submitButtonTextColor) ?? Colors.white,
-      descriptionTextColor: _colorFromHex(appearance?.descriptionTextColor),
-      ratingButtonColor: _colorFromHex(appearance?.ratingButtonColor),
+      descriptionTextColor:
+          _colorFromHex(appearance?.descriptionTextColor) ?? Colors.black,
+      questionTextColor: Colors.black,
+      closeButtonColor: Colors.black,
+      ratingButtonColor: _colorFromHex(appearance?.ratingButtonColor) ??
+          const Color(0xFFEEEEEE),
       ratingButtonActiveColor:
-          _colorFromHex(appearance?.ratingButtonActiveColor),
+          _colorFromHex(appearance?.ratingButtonActiveColor) ?? Colors.black,
+      ratingButtonSelectedTextColor: Colors.white,
+      ratingButtonUnselectedTextColor: const Color(0x80000000),
       displayThankYouMessage: appearance?.displayThankYouMessage ?? true,
       thankYouMessageHeader:
           appearance?.thankYouMessageHeader ?? 'Thank you for your feedback!',
       thankYouMessageDescription: appearance?.thankYouMessageDescription,
       thankYouMessageCloseButtonText:
           appearance?.thankYouMessageCloseButtonText ?? 'Close',
-      borderColor: _colorFromHex(appearance?.borderColor),
+      borderColor:
+          _colorFromHex(appearance?.borderColor) ?? const Color(0xFFBDBDBD),
+      inputBackgroundColor: Colors.white,
+      inputTextColor: Colors.black,
+      inputPlaceholderColor: const Color(0xFF757575),
+      choiceButtonBorderColor: Colors.black,
+      choiceButtonTextColor: Colors.black,
     );
   }
 

lib/src/surveys/widgets/number_rating_button.dart

@@ -22,8 +22,8 @@ class NumberRatingButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final buttonColor = isSelected
-        ? appearance.ratingButtonActiveColor ?? Colors.black
-        : appearance.ratingButtonColor ?? Colors.grey.shade200;
+        ? appearance.ratingButtonActiveColor
+        : appearance.ratingButtonColor;
 
     return Expanded(
       child: Row(
@@ -61,8 +61,8 @@ class NumberRatingButton extends StatelessWidget {
                           value.toString(),
                           style: TextStyle(
                             color: isSelected
-                                ? Colors.white
-                                : Colors.black.withValues(alpha: 0.5),
+                                ? appearance.ratingButtonSelectedTextColor
+                                : appearance.ratingButtonUnselectedTextColor,
                             fontSize: 16,
                             fontWeight: FontWeight.bold,
                           ),
@@ -78,7 +78,7 @@ class NumberRatingButton extends StatelessWidget {
             Container(
               height: 45,
               width: 1,
-              color: appearance.borderColor ?? Colors.grey.shade400,
+              color: appearance.borderColor,
             ),
         ],
       ),

lib/src/surveys/widgets/open_text_question.dart

@@ -66,8 +66,8 @@ class _OpenTextQuestionState extends State<OpenTextQuestion> {
                 minHeight: 80,
               ),
               decoration: BoxDecoration(
-                color: Colors.white,
-                border: Border.all(color: Colors.grey.shade400),
+                color: widget.appearance.inputBackgroundColor,
+                border: Border.all(color: widget.appearance.borderColor),
                 borderRadius: BorderRadius.circular(6),
               ),
               child: SingleChildScrollView(
@@ -77,10 +77,12 @@ class _OpenTextQuestionState extends State<OpenTextQuestion> {
                   textAlignVertical: TextAlignVertical.top,
                   decoration: InputDecoration(
                     hintText: 'Start typing...',
-                    hintStyle: TextStyle(color: Colors.grey.shade600),
+                    hintStyle: TextStyle(
+                        color: widget.appearance.inputPlaceholderColor),
                     contentPadding: const EdgeInsets.all(12),
                     border: InputBorder.none,
                   ),
+                  style: TextStyle(color: widget.appearance.inputTextColor),
                   onChanged: (value) {
                     setState(() {
                       _response = value;

lib/src/surveys/widgets/question_header.dart

@@ -27,7 +27,7 @@ class QuestionHeader extends StatelessWidget {
             style: TextStyle(
               fontSize: 18,
               fontWeight: FontWeight.bold,
-              color: Colors.black,
+              color: appearance.questionTextColor,
             ),
           ),
         ],
@@ -39,7 +39,7 @@ class QuestionHeader extends StatelessWidget {
             description!,
             style: TextStyle(
               fontSize: 16,
-              color: appearance.descriptionTextColor ?? Colors.black,
+              color: appearance.descriptionTextColor,
             ),
           ),
         ],

lib/src/surveys/widgets/rating_icons.dart

@@ -445,14 +445,14 @@ enum RatingIconType {
 class RatingIcon extends StatelessWidget {
   final bool selected;
   final RatingIconType type;
-  final Color? color;
+  final Color color;
   final double size;
 
   const RatingIcon({
     super.key,
     required this.type,
     this.selected = false,
-    this.color,
+    required this.color,
     this.size = 48.0,
   });
 
@@ -465,7 +465,7 @@ class RatingIcon extends StatelessWidget {
         painter: RatingIconPainter(
           selected: selected,
           type: type,
-          color: color ?? Theme.of(context).iconTheme.color ?? Colors.grey,
+          color: color,
         ),
       ),
     );

lib/src/surveys/widgets/rating_question.dart

@@ -112,8 +112,9 @@ class _RatingQuestionState extends State<RatingQuestion> {
     final range = widget.scaleUpperBound - widget.scaleLowerBound + 1;
     if (widget.type == PostHogDisplaySurveyRatingType.emoji &&
         (range == 3 || range == 5)) {
-      final buttonColor =
-          isSelected ? Colors.black : Colors.black.withAlpha(128);
+      final buttonColor = isSelected
+          ? widget.appearance.choiceButtonTextColor
+          : widget.appearance.choiceButtonTextColor.withAlpha(128);
       // Convert value to 0-based index.
       // When scaleLowerBound is zero (NPS), the index is the same as the value.
       final index = value - widget.scaleLowerBound;
@@ -163,10 +164,10 @@ class _RatingQuestionState extends State<RatingQuestion> {
         else
           Container(
             decoration: BoxDecoration(
-              color: Colors.white,
+              color: widget.appearance.inputBackgroundColor,
               borderRadius: BorderRadius.circular(6),
               border: Border.all(
-                color: widget.appearance.borderColor ?? Colors.grey.shade400,
+                color: widget.appearance.borderColor,
                 width: 2,
               ),
             ),

lib/src/surveys/widgets/survey_bottom_sheet.dart

@@ -182,7 +182,7 @@ class _SurveyBottomSheetState extends State<SurveyBottomSheet> {
       },
       child: Container(
         decoration: BoxDecoration(
-          color: widget.appearance.backgroundColor ?? Colors.white,
+          color: widget.appearance.backgroundColor,
           borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
         ),
         child: SafeArea(
@@ -201,7 +201,8 @@ class _SurveyBottomSheetState extends State<SurveyBottomSheet> {
                     mainAxisAlignment: MainAxisAlignment.end,
                     children: [
                       IconButton(
-                        icon: const Icon(Icons.close),
+                        icon: Icon(Icons.close,
+                            color: widget.appearance.closeButtonColor),
                         onPressed: () => _handleClose(),
                       ),
                     ],

lib/src/surveys/widgets/survey_choice_button.dart

@@ -32,8 +32,8 @@ class SurveyChoiceButton extends StatelessWidget {
           decoration: BoxDecoration(
             border: Border.all(
               color: isSelected
-                  ? Colors.black
-                  : Colors.black.withValues(alpha: 0.5),
+                  ? appearance.choiceButtonBorderColor
+                  : appearance.choiceButtonBorderColor.withValues(alpha: 0.5),
               width: 1,
             ),
             borderRadius: BorderRadius.circular(4),
@@ -50,8 +50,9 @@ class SurveyChoiceButton extends StatelessWidget {
                             '$label:',
                             style: TextStyle(
                               color: isSelected
-                                  ? Colors.black
-                                  : Colors.black.withAlpha(128),
+                                  ? appearance.choiceButtonTextColor
+                                  : appearance.choiceButtonTextColor
+                                      .withAlpha(128),
                               fontWeight: isSelected ? FontWeight.bold : null,
                             ),
                           ),
@@ -68,8 +69,9 @@ class SurveyChoiceButton extends StatelessWidget {
                             ),
                             style: TextStyle(
                               color: isSelected
-                                  ? Colors.black
-                                  : Colors.black.withAlpha(128),
+                                  ? appearance.choiceButtonTextColor
+                                  : appearance.choiceButtonTextColor
+                                      .withAlpha(128),
                               fontSize: 14,
                             ),
                           ),
@@ -86,10 +88,10 @@ class SurveyChoiceButton extends StatelessWidget {
                       ),
               ),
               if (isSelected)
-                const Icon(
+                Icon(
                   Icons.check,
                   size: 16,
-                  color: Colors.black,
+                  color: appearance.choiceButtonTextColor,
                 ),
             ],
           ),