diff --git a/lib/src/surveys/models/survey_appearance.dart b/lib/src/surveys/models/survey_appearance.dart index c01ecddc..aa737e41 100644 --- a/lib/src/surveys/models/survey_appearance.dart +++ b/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, ); } diff --git a/lib/src/surveys/widgets/number_rating_button.dart b/lib/src/surveys/widgets/number_rating_button.dart index d292ac65..f5127058 100644 --- a/lib/src/surveys/widgets/number_rating_button.dart +++ b/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, ), ], ), diff --git a/lib/src/surveys/widgets/open_text_question.dart b/lib/src/surveys/widgets/open_text_question.dart index d00caace..b0fe8e9c 100644 --- a/lib/src/surveys/widgets/open_text_question.dart +++ b/lib/src/surveys/widgets/open_text_question.dart @@ -66,8 +66,8 @@ class _OpenTextQuestionState extends State { 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 { 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; diff --git a/lib/src/surveys/widgets/question_header.dart b/lib/src/surveys/widgets/question_header.dart index 9e608de4..ed76b8cf 100644 --- a/lib/src/surveys/widgets/question_header.dart +++ b/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, ), ), ], diff --git a/lib/src/surveys/widgets/rating_icons.dart b/lib/src/surveys/widgets/rating_icons.dart index 60f9966e..c17790fe 100644 --- a/lib/src/surveys/widgets/rating_icons.dart +++ b/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, ), ), ); diff --git a/lib/src/surveys/widgets/rating_question.dart b/lib/src/surveys/widgets/rating_question.dart index f5162460..7d171596 100644 --- a/lib/src/surveys/widgets/rating_question.dart +++ b/lib/src/surveys/widgets/rating_question.dart @@ -112,8 +112,9 @@ class _RatingQuestionState extends State { 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 { 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, ), ), diff --git a/lib/src/surveys/widgets/survey_bottom_sheet.dart b/lib/src/surveys/widgets/survey_bottom_sheet.dart index 024333d0..0f7d0450 100644 --- a/lib/src/surveys/widgets/survey_bottom_sheet.dart +++ b/lib/src/surveys/widgets/survey_bottom_sheet.dart @@ -182,7 +182,7 @@ class _SurveyBottomSheetState extends State { }, 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 { mainAxisAlignment: MainAxisAlignment.end, children: [ IconButton( - icon: const Icon(Icons.close), + icon: Icon(Icons.close, + color: widget.appearance.closeButtonColor), onPressed: () => _handleClose(), ), ], diff --git a/lib/src/surveys/widgets/survey_choice_button.dart b/lib/src/surveys/widgets/survey_choice_button.dart index 33174208..bfa777b3 100644 --- a/lib/src/surveys/widgets/survey_choice_button.dart +++ b/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, ), ], ),