Feat/specific badge page

lib/view/pages/badges/achievement_badges.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:gameonconnect/view/pages/models/specific_badge_page.dart';
+import 'package:gameonconnect/view/pages/badges/badge_page.dart';
 
 class AchievementBadgesPage extends StatefulWidget {
   const AchievementBadgesPage({super.key});
@@ -40,7 +40,14 @@
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: const Text('My Badges'),
+        iconTheme: IconThemeData(
+          color: Theme.of(context).colorScheme.primary
+        ),
+        title: Text('My Badges',
+            style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 16,
+                color: Theme.of(context).colorScheme.primary)),
       ),
       body: Padding(
         padding: const EdgeInsets.all(12),
@@ -54,10 +61,13 @@
           itemBuilder: (context, index) {
             return GestureDetector(
               onTap: () {
-                  Navigator.push(
-                    context,
-                    MaterialPageRoute(builder: (context) => SpecificBadgePage(badgeName: badges[index] ,badgeFileName: badgeFiles[index])),
-                  );
+                Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                      builder: (context) => BadgePage(
+                          badgeName: badges[index],
+                          badgeFileName: badgeFiles[index])),
+                );
               },
               child: Container(
                 decoration: BoxDecoration(

lib/view/pages/badges/badge_page.dart

@@ -0,0 +1,96 @@
+import 'package:avatar_stack/avatar_stack.dart';
+import 'package:flutter/material.dart';
+import 'package:model_viewer_plus/model_viewer_plus.dart';
+
+class BadgePage extends StatefulWidget {
+  final String badgeFileName;
+  final String badgeName;
+  const BadgePage(
+      {super.key, required this.badgeFileName, required this.badgeName});
+
+  @override
+  State<BadgePage> createState() => _BadgePageState();
+}
+
+class _BadgePageState extends State<BadgePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        iconTheme: IconThemeData(
+          color: Theme.of(context).colorScheme.primary
+        ),
+        title: Text('My Badges',
+            style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 16,
+                color: Theme.of(context).colorScheme.primary)),
+      ),
+      body: Column(children: [
+        Expanded(
+            child: ModelViewer(
+          disablePan: true,
+          disableZoom: true,
+          src: 'assets/models/${widget.badgeFileName}.glb',
+          alt: 'A 3D model of a badge',
+          autoRotate: true,
+          cameraControls: true,
+        )),
+        Padding(
+          padding: const EdgeInsets.all(12),
+          child: Divider(
+            color: Theme.of(context).colorScheme.primaryContainer,
+          ),
+        ),
+        Text(widget.badgeName,
+            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 24)),
+        const SizedBox(height: 18),
+        const SizedBox(
+            width: 280,
+            child: Text(
+              "You earned this badge by using the app for 10 consecutive days",
+              style: TextStyle(fontSize: 13, color: Colors.grey),
+              textAlign: TextAlign.center,
+            )),
+        const SizedBox(height: 18),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text("Earned on:",
+                style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    color: Theme.of(context).colorScheme.primary)),
+            const SizedBox(
+              width: 10,
+            ),
+            const Text("2024/03/02", style: TextStyle(color: Colors.grey))
+          ],
+        ),
+        const SizedBox(height: 31),
+        const Padding(
+          padding: EdgeInsets.fromLTRB(12, 0, 0, 0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text("Also earned by", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15)),
+            ],
+          ),
+        ),
+        const SizedBox(height: 18),
+        Padding(
+          padding: const EdgeInsets.all(12),
+          child: AvatarStack(
+            width: 250,
+            height: 50,
+            borderColor: Theme.of(context).colorScheme.surface,
+            avatars: [
+                    for (var n = 0; n < 15; n++)
+                      NetworkImage('https://i.pravatar.cc/150?img=$n'),
+                  ],
+          ),
+        ),
+        const SizedBox(height: 100)
+      ]),
+    );
+  }
+}

pubspec.yaml

@@ -72,7 +72,7 @@ dependencies:
   html_unescape: ^2.0.0
   insta_image_viewer: ^1.0.4
   youtube_player_flutter: ^9.0.3
-
+  avatar_stack: ^1.2.0
   flame: ^1.19.0
   flame_tiled: ^1.20.3
   flame_audio: ^2.10.3