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',
+      routerConfig: router,
-      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(),
     );
   }
+
+  // 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,126 +10,129 @@ class CardGame extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
         padding: EdgeInsets.fromLTRB(41, 0, 41, 10),
-        child: Stack(
+        child: GestureDetector(
-          alignment: AlignmentDirectional.centerEnd,
+          child: Stack(
-          children: [
+            alignment: AlignmentDirectional.centerEnd,
-            Container(
+            children: [
-                height: 100,
+              Container(
-                width: 300,
+                  height: 100,
-                decoration: BoxDecoration(
+                  width: 300,
-                  borderRadius: BorderRadius.only(
+                  decoration: BoxDecoration(
-                      topLeft: Radius.circular(8),
+                    borderRadius: BorderRadius.only(
-                      topRight: Radius.circular(8),
+                        topLeft: Radius.circular(8),
-                      bottomRight: Radius.circular(15),
+                        topRight: Radius.circular(8),
-                      bottomLeft: Radius.circular(15)),
+                        bottomRight: Radius.circular(15),
-                  image: DecorationImage(
+                        bottomLeft: Radius.circular(15)),
-                    image: AssetImage("assets/images/card_game.png"),
+                    image: DecorationImage(
+                      image: AssetImage("assets/images/card_game.png"),
+                    ),
                   ),
-                ),
+                  child: Padding(
-                child: Padding(
+                    padding: EdgeInsets.fromLTRB(130, 3, 0, 0),
-                  padding: EdgeInsets.fromLTRB(130, 3, 0, 0),
+                    child: ClipRect(
-                  child: ClipRect(
+                        clipBehavior: Clip.hardEdge,
-                      clipBehavior: Clip.hardEdge,
+                        child: Opacity(
-                      child: Opacity(
+                            opacity: 0.1,
-                          opacity: 0.1,
+                            child: Stack(
-                          child: Stack(
+                              children: [
-                            children: [
+                                GradientText(
-                              GradientText(
+                                  "125",
-                                "125",
+                                  style: GoogleFonts.karla(
-                                style: GoogleFonts.karla(
+                                    fontSize: 105.0,
-                                  fontSize: 105.0,
+                                    fontWeight: FontWeight.w900,
-                                  fontWeight: FontWeight.w900,
+                                    fontStyle: FontStyle.italic,
-                                  fontStyle: FontStyle.italic,
+                                    foreground: Paint()
-                                  foreground: Paint()
+                                      ..style = PaintingStyle.stroke
-                                    ..style = PaintingStyle.stroke
+                                      ..strokeWidth = 1
-                                    ..strokeWidth = 1
+                                      ..color = Color(0xff6100FF),
-                                    ..color = Color(0xff6100FF),
+                                  ),
+                                  gradientType: GradientType.linear,
+                                  gradientDirection: GradientDirection.rtl,
+                                  radius: 2.5,
+                                  colors: [
+                                    Color(0xff5500E0),
+                                    Color(0xff2C2C2C).withOpacity(0),
+                                  ],
                                 ),
-                                gradientType: GradientType.linear,
+                                GradientText(
-                                gradientDirection: GradientDirection.rtl,
+                                  "125",
-                                radius: 2.5,
+                                  style: GoogleFonts.karla(
-                                colors: [
+                                    fontSize: 105.0,
-                                  Color(0xff5500E0),
+                                    fontWeight: FontWeight.w900,
-                                  Color(0xff2C2C2C).withOpacity(0),
+                                    fontStyle: FontStyle.italic,
-                                ],
+                                  ),
-                              ),
+                                  gradientType: GradientType.linear,
-                              GradientText(
+                                  gradientDirection: GradientDirection.rtl,
+                                  radius: 2.5,
+                                  colors: [
+                                    Color(0xff5500E0),
+                                    Color(0xff2C2C2C).withOpacity(0),
+                                  ],
+                                ),
+                              ],
+                            ))),
+                  )),
+              Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      Toast(),
+                      Toast(),
+                    ],
+                  ),
+                  Stack(
+                    children: [
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisAlignment: MainAxisAlignment.end,
+                        children: [
+                          Padding(
+                              padding: EdgeInsets.fromLTRB(25, 15, 0, 0),
+                              child: SizedBox(
+                                width: 130,
+                                child: Wrap(
+                                  spacing: 5,
+                                  runSpacing: 5,
+                                  children: [
+                                    ProfilPicture(),
+                                    ProfilPicture(),
+                                    ProfilPicture(),
+                                    ProfilPicture(),
+                                    ProfilPicture(),
+                                    ProfilPicture(),
+                                  ],
+                                ),
+                              )),
+                          Spacer(),
+                          Padding(
+                              padding: EdgeInsets.fromLTRB(0, 30, 15, 0),
+                              child: GradientText(
                                 "125",
-                                style: GoogleFonts.karla(
+                                style: TextStyle(
-                                  fontSize: 105.0,
+                                  fontSize: 40.0,
                                   fontWeight: FontWeight.w900,
                                   fontStyle: FontStyle.italic,
                                 ),
                                 gradientType: GradientType.linear,
-                                gradientDirection: GradientDirection.rtl,
+                                gradientDirection: GradientDirection.ttb,
                                 radius: 2.5,
                                 colors: [
-                                  Color(0xff5500E0),
+                                  Color(0xff181818),
-                                  Color(0xff2C2C2C).withOpacity(0),
+                                  Color(0xff626262),
-                                ],
-                              ),
-                            ],
-                          ))),
-                )),
-            Column(
-              mainAxisAlignment: MainAxisAlignment.start,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.end,
-                  children: [
-                    Toast(),
-                    Toast(),
-                  ],
-                ),
-                Stack(
-                  children: [
-                    Row(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      mainAxisAlignment: MainAxisAlignment.end,
-                      children: [
-                        Padding(
-                            padding: EdgeInsets.fromLTRB(25, 15, 0, 0),
-                            child: SizedBox(
-                              width: 130,
-                              child: Wrap(
-                                spacing: 5,
-                                runSpacing: 5,
-                                children: [
-                                  ProfilPicture(),
-                                  ProfilPicture(),
-                                  ProfilPicture(),
-                                  ProfilPicture(),
-                                  ProfilPicture(),
-                                  ProfilPicture(),
                                 ],
-                              ),
+                              )),
-                            )),
+                        ],
-                        Spacer(),
+                      ),
-                        Padding(
+                    ],
-                            padding: EdgeInsets.fromLTRB(0, 30, 15, 0),
+                  ),
-                            child: GradientText(
+                ],
-                              "125",
+              ),
-                              style: TextStyle(
+            ],
-                                fontSize: 40.0,
+          ),
-                                fontWeight: FontWeight.w900,
+          onTap: () => context.go('/in-game'),
-                                fontStyle: FontStyle.italic,
-                              ),
-                              gradientType: GradientType.linear,
-                              gradientDirection: GradientDirection.ttb,
-                              radius: 2.5,
-                              colors: [
-                                Color(0xff181818),
-                                Color(0xff626262),
-                              ],
-                            )),
-                      ],
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ],
         ));
   }
 }

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