Skip to content

Commit 0252499

Browse files
adboioadboio
committed
chore(surveys): enable thumb survey display
1 parent 1f5f2cf commit 0252499

File tree

3 files changed

+186
-5
lines changed

3 files changed

+186
-5
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## Next
22

3+
- chore: add support for thumbs up/down surveys ([#257](https://github.com/PostHog/posthog-flutter/pull/257))
4+
35
- chore: improve survey color handling ([#233](https://github.com/PostHog/posthog-flutter/pull/233))
46

57
- feat: add `userProperties` and `userPropertiesSetOnce` parameters to `capture()` method ([#254](https://github.com/PostHog/posthog-flutter/pull/254))

‎lib/src/surveys/widgets/rating_icons.dart‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ class RatingIconPainter extends CustomPainter {
5252
case RatingIconType.verySatisfied:
5353
_drawVerySatisfied(canvas, size, paint);
5454
break;
55+
case RatingIconType.thumbsUp:
56+
_drawThumbsUp(canvas, size, paint);
57+
break;
58+
case RatingIconType.thumbsDown:
59+
_drawThumbsDown(canvas, size, paint);
60+
break;
5561
}
5662
}
5763

@@ -432,6 +438,162 @@ class RatingIconPainter extends CustomPainter {
432438
// Draw circle outline
433439
canvas.drawPath(path, paint);
434440
}
441+
442+
void _drawThumbsUp(Canvas canvas, Size size, Paint paint) {
443+
// Create filled paint style for the thumb
444+
final fillPaint = Paint()
445+
..color = paint.color
446+
..style = PaintingStyle.fill;
447+
448+
Path path = Path();
449+
final width = _scale;
450+
final height = _scale;
451+
452+
// Left rectangle (base)
453+
path.moveTo(0.08333 * width, 0.83333 * height);
454+
path.lineTo(0.16667 * width, 0.83333 * height);
455+
path.cubicTo(
456+
0.18958 * width, 0.83333 * height,
457+
0.20833 * width, 0.81458 * height,
458+
0.20833 * width, 0.79167 * height,
459+
);
460+
path.lineTo(0.20833 * width, 0.41667 * height);
461+
path.cubicTo(
462+
0.20833 * width, 0.39375 * height,
463+
0.18958 * width, 0.375 * height,
464+
0.16667 * width, 0.375 * height,
465+
);
466+
path.lineTo(0.08333 * width, 0.375 * height);
467+
path.close();
468+
469+
// Main thumb shape
470+
path.moveTo(0.91208 * width, 0.53667 * height);
471+
path.cubicTo(
472+
0.91667 * width, 0.52625 * height,
473+
0.91917 * width, 0.51500 * height,
474+
0.91917 * width, 0.50333 * height,
475+
);
476+
path.lineTo(0.91917 * width, 0.45833 * height);
477+
path.cubicTo(
478+
0.91917 * width, 0.4125 * height,
479+
0.87917 * width, 0.375 * height,
480+
0.83333 * width, 0.375 * height,
481+
);
482+
path.lineTo(0.60417 * width, 0.375 * height);
483+
path.lineTo(0.6425 * width, 0.18125 * height);
484+
path.cubicTo(
485+
0.64458 * width, 0.17208 * height,
486+
0.64333 * width, 0.16292 * height,
487+
0.63917 * width, 0.15375 * height,
488+
);
489+
path.cubicTo(
490+
0.62958 * width, 0.13500 * height,
491+
0.61750 * width, 0.11792 * height,
492+
0.60250 * width, 0.10292 * height,
493+
);
494+
path.lineTo(0.58333 * width, 0.08333 * height);
495+
path.lineTo(0.31625 * width, 0.35042 * height);
496+
path.cubicTo(
497+
0.30042 * width, 0.36625 * height,
498+
0.29167 * width, 0.3875 * height,
499+
0.29167 * width, 0.40958 * height,
500+
);
501+
path.lineTo(0.29167 * width, 0.73625 * height);
502+
path.cubicTo(
503+
0.29167 * width, 0.78958 * height,
504+
0.33542 * width, 0.83333 * height,
505+
0.38917 * width, 0.83333 * height,
506+
);
507+
path.lineTo(0.72708 * width, 0.83333 * height);
508+
path.cubicTo(
509+
0.75625 * width, 0.83333 * height,
510+
0.78542 * width, 0.81792 * height,
511+
0.79875 * width, 0.79292 * height,
512+
);
513+
path.lineTo(0.90958 * width, 0.53667 * height);
514+
path.close();
515+
516+
// Draw the filled thumb
517+
canvas.drawPath(path, fillPaint);
518+
}
519+
520+
void _drawThumbsDown(Canvas canvas, Size size, Paint paint) {
521+
// Create filled paint style for the thumb
522+
final fillPaint = Paint()
523+
..color = paint.color
524+
..style = PaintingStyle.fill;
525+
526+
Path path = Path();
527+
final width = _scale;
528+
final height = _scale;
529+
530+
// Right rectangle (base)
531+
path.moveTo(0.91667 * width, 0.16667 * height);
532+
path.lineTo(0.83333 * width, 0.16667 * height);
533+
path.cubicTo(
534+
0.81042 * width, 0.16667 * height,
535+
0.79167 * width, 0.18542 * height,
536+
0.79167 * width, 0.20833 * height,
537+
);
538+
path.lineTo(0.79167 * width, 0.58333 * height);
539+
path.cubicTo(
540+
0.79167 * width, 0.60625 * height,
541+
0.81042 * width, 0.625 * height,
542+
0.83333 * width, 0.625 * height,
543+
);
544+
path.lineTo(0.91667 * width, 0.625 * height);
545+
path.close();
546+
547+
// Main thumb shape
548+
path.moveTo(0.09042 * width, 0.46333 * height);
549+
path.cubicTo(
550+
0.08583 * width, 0.47375 * height,
551+
0.08333 * width, 0.485 * height,
552+
0.08333 * width, 0.49667 * height,
553+
);
554+
path.lineTo(0.08333 * width, 0.54167 * height);
555+
path.cubicTo(
556+
0.08333 * width, 0.5875 * height,
557+
0.12083 * width, 0.625 * height,
558+
0.16667 * width, 0.625 * height,
559+
);
560+
path.lineTo(0.39583 * width, 0.625 * height);
561+
path.lineTo(0.3575 * width, 0.81875 * height);
562+
path.cubicTo(
563+
0.35542 * width, 0.82792 * height,
564+
0.35667 * width, 0.83708 * height,
565+
0.36083 * width, 0.84625 * height,
566+
);
567+
path.cubicTo(
568+
0.37042 * width, 0.865 * height,
569+
0.3825 * width, 0.88208 * height,
570+
0.3975 * width, 0.89708 * height,
571+
);
572+
path.lineTo(0.41667 * width, 0.91667 * height);
573+
path.lineTo(0.68375 * width, 0.64958 * height);
574+
path.cubicTo(
575+
0.69958 * width, 0.63375 * height,
576+
0.70833 * width, 0.6125 * height,
577+
0.70833 * width, 0.59042 * height,
578+
);
579+
path.lineTo(0.70833 * width, 0.26417 * height);
580+
path.cubicTo(
581+
0.70833 * width, 0.21042 * height,
582+
0.66458 * width, 0.16667 * height,
583+
0.61083 * width, 0.16667 * height,
584+
);
585+
path.lineTo(0.27292 * width, 0.16667 * height);
586+
path.cubicTo(
587+
0.24375 * width, 0.16667 * height,
588+
0.21458 * width, 0.18208 * height,
589+
0.20125 * width, 0.20708 * height,
590+
);
591+
path.lineTo(0.09042 * width, 0.46333 * height);
592+
path.close();
593+
594+
// Draw the filled thumb
595+
canvas.drawPath(path, fillPaint);
596+
}
435597
}
436598

437599
enum RatingIconType {
@@ -440,6 +602,8 @@ enum RatingIconType {
440602
neutral,
441603
satisfied,
442604
verySatisfied,
605+
thumbsUp,
606+
thumbsDown,
443607
}
444608

445609
class RatingIcon extends StatelessWidget {

‎lib/src/surveys/widgets/rating_question.dart‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,17 @@ class _RatingQuestionState extends State<RatingQuestion> {
6060
RatingIconType _getRatingIconType(int index) {
6161
final range = widget.scaleUpperBound - widget.scaleLowerBound + 1;
6262

63-
if (range == 3) {
63+
if (range == 2) {
64+
// 2-point scale (thumbs up/down)
65+
switch (index) {
66+
case 0:
67+
return RatingIconType.thumbsUp;
68+
case 1:
69+
return RatingIconType.thumbsDown;
70+
default:
71+
return RatingIconType.thumbsUp;
72+
}
73+
} else if (range == 3) {
6474
// 3-point scale
6575
switch (index) {
6676
case 0:
@@ -108,10 +118,10 @@ class _RatingQuestionState extends State<RatingQuestion> {
108118
});
109119
}
110120

111-
// Show emoji ratings when display == .emoji and scale is 3-point or 5-point
121+
// Show emoji ratings when display == .emoji and scale is 2-point, 3-point or 5-point
112122
final range = widget.scaleUpperBound - widget.scaleLowerBound + 1;
113123
if (widget.type == PostHogDisplaySurveyRatingType.emoji &&
114-
(range == 3 || range == 5)) {
124+
(range == 2 || range == 3 || range == 5)) {
115125
final buttonColor = isSelected
116126
? widget.appearance.choiceButtonTextColor
117127
: widget.appearance.choiceButtonTextColor.withAlpha(128);
@@ -144,6 +154,8 @@ class _RatingQuestionState extends State<RatingQuestion> {
144154

145155
@override
146156
Widget build(BuildContext context) {
157+
final isThumbSurvey = (widget.scaleUpperBound - widget.scaleLowerBound + 1) == 2;
158+
147159
return Column(
148160
mainAxisSize: MainAxisSize.min,
149161
crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -157,7 +169,9 @@ class _RatingQuestionState extends State<RatingQuestion> {
157169
const SizedBox(height: 24),
158170
if (widget.type == PostHogDisplaySurveyRatingType.emoji)
159171
Row(
160-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
172+
mainAxisAlignment: isThumbSurvey
173+
? MainAxisAlignment.spaceAround
174+
: MainAxisAlignment.spaceBetween,
161175
children:
162176
_ratingRange.map((value) => _buildRatingButton(value)).toList(),
163177
)
@@ -177,7 +191,8 @@ class _RatingQuestionState extends State<RatingQuestion> {
177191
.toList(),
178192
),
179193
),
180-
if (widget.lowerBoundLabel != null || widget.upperBoundLabel != null)
194+
if ((widget.lowerBoundLabel != null || widget.upperBoundLabel != null) &&
195+
!isThumbSurvey)
181196
Padding(
182197
padding: const EdgeInsets.only(top: 4),
183198
child: Row(

0 commit comments

Comments
 (0)