add achievement and first page for config parties

lib/config/app_router.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/cupertino.dart';
+import 'package:go_router/go_router.dart';
+
+import '../views/game_screen.dart';
+import '../views/ingame_screen.dart';
+import '../views/main_screen.dart';
+import '../views/rank_screen.dart';
+import '../views/welcome_screen.dart';
+
+final GoRouter router = GoRouter(
+  routes: <RouteBase>[
+    GoRoute(
+      path: '/',
+      builder: (BuildContext context, GoRouterState state) {
+        return const MainScreen();
+      },
+      routes: <RouteBase>[
+        GoRoute(
+          path: 'games',
+          builder: (BuildContext context, GoRouterState state) {
+            return const GameScreen();
+          },
+        ),
+        GoRoute(
+          path: 'ranking',
+          builder: (BuildContext context, GoRouterState state) {
+            return const RankScreen();
+          },
+        ),
+        GoRoute(
+          path: 'splash',
+          builder: (BuildContext context, GoRouterState state) {
+            return const WelcomeScreen();
+          },
+        ),
+        GoRoute(
+          path: 'in-game',
+          builder: (BuildContext context, GoRouterState state) {
+            return const InGameScreen();
+          },
+        ),
+      ],
+    ),
+  ],
+);

lib/main.dart

@@ -1,73 +1,31 @@
 import 'package:bowl_in/views/game_screen.dart';
+import 'package:bowl_in/views/ingame_screen.dart';
 import 'package:bowl_in/views/main_screen.dart';
 import 'package:bowl_in/views/rank_screen.dart';
 import 'package:bowl_in/views/welcome_screen.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:go_router/go_router.dart';
+import 'package:bowl_in/config/app_router.dart';
 
 void main() {
   runApp(const MyApp());
 }
 
-final GoRouter _router = GoRouter(
-  routes: <RouteBase>[
-    GoRoute(
-      path: '/',
-      builder: (BuildContext context, GoRouterState state) {
-        return const MainScreen();
-      },
-      routes: <RouteBase>[
-        GoRoute(
-          path: 'games',
-          builder: (BuildContext context, GoRouterState state) {
-            return const GameScreen();
-          },
-        ),
-        GoRoute(
-          path: 'ranking',
-          builder: (BuildContext context, GoRouterState state) {
-            return const RankScreen();
-          },
-        ),
-        GoRoute(
-          path: 'splash',
-          builder: (BuildContext context, GoRouterState state) {
-            return const WelcomeScreen();
-          },
-        ),
-      ],
-    ),
-  ],
-);
-
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
-
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
     SystemChrome.setSystemUIOverlayStyle(
         const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
-    return MaterialApp(
+    return MaterialApp.router(
       debugShowCheckedModeBanner: false,
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // Try running your application with "flutter run". You'll see the
-        // application has a blue toolbar. Then, without quitting the app, try
-        // changing the primarySwatch below to Colors.green and then invoke
-        // "hot reload" (press "r" in the console where you ran "flutter run",
-        // or simply save your changes to "hot reload" in a Flutter IDE).
-        // Notice that the counter didn't reset back to zero; the application
-        // is not restarted.
-        primarySwatch: Colors.blue,
-      ),
-      home: const MainScreen(),
+      routerConfig: router,
     );
   }
+
+  // This widget is the root of your application.
 }
 
 class MyHomePage extends StatefulWidget {

lib/views/ingame_screen.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+import '../widgets/button_new_party.dart';
+import '../widgets/ingame_widgets.dart';
+import '../widgets/scores_list_widget.dart';
+
+class InGameScreen extends StatefulWidget {
+  const InGameScreen({Key? key}) : super(key: key);
+
+  @override
+  State<InGameScreen> createState() => _InGameScreenState();
+}
+
+class _InGameScreenState extends State<InGameScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Container(
+          width: MediaQuery.of(context).size.width,
+          height: MediaQuery.of(context).size.height,
+          decoration: const BoxDecoration(
+              gradient: LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: [
+              Color(0xff19BDE0),
+              Color(0xff4A17DC),
+            ],
+          )),
+        ),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            SizedBox(
+              height: 120,
+            ),
+            InGameCardConfig(),
+            Spacer(),
+            ElevatedButton(
+              onPressed: () {},
+              child: Text(
+                "PLAY",
+                style: GoogleFonts.roboto(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 40,
+                    color: Color(0xff1ABAE0)),
+              ),
+              style: ElevatedButton.styleFrom(
+                side: BorderSide(
+                  width: 7,
+                  color: Color(0xff1ABAE0),
+                ),
+                onPrimary: Colors.transparent,
+                primary: Colors.transparent,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(55),
+                ),
+                minimumSize: Size(200, 80),
+              ),
+            ),
+            Spacer(),
+          ],
+        )
+      ],
+    );
+  }
+}

lib/widgets/achievements_list_widget.dart

@@ -74,57 +74,61 @@ class ListAchievementWidget extends StatelessWidget {
                     ),
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath: 'assets/images/achievements/5friends_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/5friends_unlocked.png',
                     isUnlocked: 0,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath: 'assets/images/achievements/win_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/win_unlocked.png',
                     isUnlocked: 1,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath:
+                        'assets/images/achievements/10strikes_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/10strikes_unlocked.png',
                     isUnlocked: 0,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath:
+                        'assets/images/achievements/150points_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/150points_unlocked.png',
                     isUnlocked: 0,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath:
+                        'assets/images/achievements/2strikeinarow_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/2strikeinarow_unlocked.png',
                     isUnlocked: 1,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath: 'assets/images/achievements/5games_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/5games_unlocked.png',
                     isUnlocked: 1,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath: 'assets/images/achievements/10spares_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/10spares_unlocked.png',
                     isUnlocked: 1,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath:
+                        'assets/images/achievements/10x9spins_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/10x9spins_unlocked.png',
                     isUnlocked: 0,
                   ),
                   AchievementWidget(
-                    imagePath: 'assets/images/image_achievement_card.png',
+                    imagePath: 'assets/images/achievements/0point_locked.png',
                     imagePathUnlocked:
-                        'assets/images/image_achievement_unlocked.png',
+                        'assets/images/achievements/0point_unlocked.png',
                     isUnlocked: 0,
                   ),
                 ],

lib/widgets/ingame_widgets.dart

@@ -0,0 +1,233 @@
+import 'package:bowl_in/widgets/scores_list_widget.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class InGameCardConfig extends StatefulWidget {
+  const InGameCardConfig({Key? key}) : super(key: key);
+
+  @override
+  State<InGameCardConfig> createState() => _InGameCardConfigState();
+}
+
+class _InGameCardConfigState extends State<InGameCardConfig> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.fromLTRB(35, 0, 30, 35),
+      width: MediaQuery.of(context).size.width,
+      height: 470,
+      decoration: BoxDecoration(
+          image: DecorationImage(
+              image: AssetImage("assets/images/ingame_cardgame.png"),
+              fit: BoxFit.fill),
+          boxShadow: [
+            BoxShadow(
+              color: CupertinoColors.black.withOpacity(0.15),
+              blurRadius: 10.0,
+              spreadRadius: 5.0,
+            ),
+          ]),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: [
+          Padding(
+              padding: EdgeInsets.fromLTRB(0, 5, 15, 0),
+              child: RichText(
+                text: TextSpan(
+                  style: DefaultTextStyle.of(context).style,
+                  children: <TextSpan>[
+                    TextSpan(
+                        text: 'Party code : ',
+                        style: GoogleFonts.roboto(
+                            fontSize: 15,
+                            color: CupertinoColors.black,
+                            fontWeight: FontWeight.w400,
+                            decoration: TextDecoration.none)),
+                    TextSpan(
+                        text: '#172 520',
+                        style: GoogleFonts.roboto(
+                            fontSize: 18,
+                            color: Color(0xffF40375),
+                            fontWeight: FontWeight.bold,
+                            decoration: TextDecoration.none)),
+                  ],
+                ),
+              )),
+          ListUserInGame(),
+          Spacer(),
+          Image(
+            image: AssetImage("assets/images/start_sentence.png"),
+          ),
+          Padding(
+              padding: EdgeInsets.fromLTRB(15, 20, 15, 15),
+              child: ElevatedButton(
+                onPressed: () {},
+                child: Text(
+                  "+ Add a player",
+                  style: GoogleFonts.roboto(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 18,
+                      color: Colors.white),
+                ),
+                style: ElevatedButton.styleFrom(
+                  elevation: 5,
+                  shadowColor: Color(0xffB70056),
+                  primary: Color(0xffF40375),
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  minimumSize: Size(double.infinity, 50),
+                ),
+              )),
+        ],
+      ),
+    );
+  }
+}
+
+class ListUserInGame extends StatefulWidget {
+  const ListUserInGame({Key? key}) : super(key: key);
+
+  @override
+  State<ListUserInGame> createState() => _ListUserInGameState();
+}
+
+class _ListUserInGameState extends State<ListUserInGame> {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+        padding: EdgeInsets.fromLTRB(20, 25, 20, 0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            ConstrainedBox(
+                constraints: new BoxConstraints(
+                  maxHeight: 170,
+                ),
+                child: ListView(children: [
+                  UserInGame(),
+                  UserInGame(),
+                  UserInGame(),
+                  UserInGame(),
+                  UserInGame(),
+                ])),
+            Text(
+              "3 player(s)",
+              style: GoogleFonts.roboto(
+                  fontWeight: FontWeight.w500,
+                  fontSize: 15,
+                  color: CupertinoColors.black,
+                  decoration: TextDecoration.none),
+            )
+          ],
+        ));
+  }
+}
+
+class UserInGame extends StatefulWidget {
+  const UserInGame({Key? key}) : super(key: key);
+
+  @override
+  State<UserInGame> createState() => _UserInGameState();
+}
+
+class _UserInGameState extends State<UserInGame> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
+      margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
+      height: 45,
+      width: double.infinity,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(10),
+        ),
+        color: Color(0xffF2F2F2),
+      ),
+      child: Row(
+        children: [
+          Container(
+            width: 30,
+            height: 30,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(70)),
+              image: DecorationImage(
+                  image: AssetImage("assets/images/image_user_cyan.png"),
+                  fit: BoxFit.cover),
+            ),
+          ),
+          SizedBox(
+            width: 10,
+          ),
+          Text(
+            "Emre",
+            style: GoogleFonts.roboto(
+                fontSize: 18,
+                decoration: TextDecoration.none,
+                color: Color(0xff241E40)),
+          ),
+          Spacer(),
+        ],
+      ),
+    );
+  }
+}
+
+class InGameCardThrow extends StatefulWidget {
+  const InGameCardThrow({Key? key}) : super(key: key);
+
+  @override
+  State<InGameCardThrow> createState() => _InGameCardThrowState();
+}
+
+class _InGameCardThrowState extends State<InGameCardThrow> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.fromLTRB(35, 0, 30, 35),
+      width: MediaQuery.of(context).size.width,
+      height: 470,
+      decoration: BoxDecoration(
+          image: DecorationImage(
+              image: AssetImage("assets/images/ingame_cardgame.png"),
+              fit: BoxFit.fill),
+          boxShadow: [
+            BoxShadow(
+              color: CupertinoColors.black.withOpacity(0.15),
+              blurRadius: 10.0,
+              spreadRadius: 5.0,
+            ),
+          ]),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: [
+          Padding(
+              padding: EdgeInsets.fromLTRB(0, 5, 15, 0),
+              child: RichText(
+                text: TextSpan(
+                  style: DefaultTextStyle.of(context).style,
+                  children: <TextSpan>[
+                    TextSpan(
+                        text: 'Party code : ',
+                        style: GoogleFonts.roboto(
+                            fontSize: 15,
+                            color: CupertinoColors.black,
+                            fontWeight: FontWeight.w400,
+                            decoration: TextDecoration.none)),
+                    TextSpan(
+                        text: '#172 520',
+                        style: GoogleFonts.roboto(
+                            fontSize: 18,
+                            color: Color(0xffF40375),
+                            fontWeight: FontWeight.bold,
+                            decoration: TextDecoration.none)),
+                  ],
+                ),
+              )),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/scores_list_widget.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
 
 import 'package:simple_gradient_text/simple_gradient_text.dart';
@@ -9,6 +10,7 @@ class CardGame extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
         padding: EdgeInsets.fromLTRB(41, 0, 41, 10),
+        child: GestureDetector(
           child: Stack(
             alignment: AlignmentDirectional.centerEnd,
             children: [
@@ -129,6 +131,8 @@ class CardGame extends StatelessWidget {
                 ],
               ),
             ],
+          ),
+          onTap: () => context.go('/in-game'),
         ));
   }
 }

pubspec.yaml

@@ -73,6 +73,7 @@ flutter:
   assets:
     - assets/images/
     - assets/fonts/
+    - assets/images/achievements/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware