rating options

lib/main.dart

@@ -31,7 +31,7 @@ class MyApp extends StatelessWidget {
                 surface: Colors.white,
                 onSurface: Color.fromRGBO(60, 60, 60, 1),
                 brightness: Brightness.light,
-                tertiary: Color.fromRGBO(251, 216, 17, 0),
+                tertiary: Color.fromRGBO(251, 216, 17, 1),
                 onTertiary: Color.fromRGBO(60, 60, 60, 1)),
             useMaterial3: true,
           ),

lib/modules/ratingEmote.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_rating_bar/flutter_rating_bar.dart';
+
+class RatingEmote extends StatelessWidget {
+  const RatingEmote({super.key, required this.onRate});
+
+  final Function onRate;
+
+  @override
+  Widget build(BuildContext context) {
+    return RatingBar.builder(
+      initialRating: 0,
+      itemCount: 3,
+      itemSize: 80,
+      itemBuilder: (context, index) {
+        switch (index) {
+          case 0:
+            return const Icon(
+              Icons.sentiment_very_dissatisfied,
+              color: Color.fromRGBO(236, 91, 91, 1.0),
+            );
+          case 1:
+            return const Icon(
+              Icons.sentiment_neutral,
+              color: Color.fromRGBO(236, 173, 91, 1.0),
+            );
+          case 2:
+            return const Icon(
+              Icons.sentiment_very_satisfied,
+              color: Color.fromRGBO(95, 175, 72, 1.0),
+            );
+        }
+        return const Icon(Icons.error);
+      },
+
+      onRatingUpdate: (rating) {},
+    );
+  }
+}

lib/modules/ratingStars.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_rating_bar/flutter_rating_bar.dart';
+
+class RatingStars extends StatelessWidget {
+  const RatingStars({super.key, required this.onRate});
+
+  final Function onRate;
+
+  @override
+  Widget build(BuildContext context) {
+    return RatingBar.builder(
+      initialRating: 0,
+      minRating: 1,
+      itemSize: 80,
+      direction: Axis.horizontal,
+      allowHalfRating: false,
+      itemCount: 5,
+      itemPadding: const EdgeInsets.symmetric(horizontal: 4),
+      itemBuilder: (context, index) {
+        return Icon(
+          Icons.star_rounded,
+          color: Theme.of(context).colorScheme.tertiary,
+        );
+      },
+      onRatingUpdate: (rating) {
+        onRate();
+      },
+    );
+  }
+}

lib/pages/pageEssen.dart

@@ -1,10 +1,19 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_rating_bar/flutter_rating_bar.dart';
+import 'package:mensaapp/modules/ratingEmote.dart';
+import 'package:mensaapp/modules/ratingStars.dart';
 
 class PageEssen extends StatelessWidget {
   const PageEssen({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Center(
+      child: Column(
+        children: [
+          RatingStars(onRate: () {})
+        ],
+      ),
+    );
   }
 }

pubspec.lock

@@ -70,6 +70,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.0.0"
+  flutter_rating_bar:
+    dependency: "direct main"
+    description:
+      name: flutter_rating_bar
+      sha256: d2af03469eac832c591a1eba47c91ecc871fe5708e69967073c043b2d775ed93
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter

pubspec.yaml

@@ -32,7 +32,7 @@ dependencies:
     sdk: flutter
   provider: ^6.1.2
   google_nav_bar: ^5.0.7
-
+  flutter_rating_bar: ^4.0.1
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.