Dev

gc_user/lib/main.dart

@@ -1,5 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:gc_user/ui/components/onboarding/onboarding_button.dart';
+import 'package:gc_user/ui/screens/auth/create_password.dart';
+import 'package:gc_user/ui/screens/onboarding/onboarding_screen.dart';
 import 'package:gc_user/ui/screens/auth/email_scren.dart';
+import 'package:gc_user/ui/screens/auth/login_screen.dart';
+import 'package:gc_user/ui/screens/auth/otp_screen.dart';
 
 void main() {
   runApp(const MyApp());
@@ -23,6 +28,10 @@ class HomeScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Scaffold(body: EmailOtpScreen());
+    return Scaffold(
+        body: OnboardingScreen(
+      index: 0,
+      screenList: screenList,
+    ));
   }
 }

gc_user/lib/ui/components/auth/password_text_field.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:gc_user/core/style/colors.dart';
+import 'package:gc_user/core/style/sizes.dart';
+import 'package:gc_user/core/style/typography.dart';
+
+class PasswordTextField extends StatelessWidget {
+  final String hintText;
+  final IconData prefixIcon;
+  final TextEditingController controller;
+  final bool obsecureText;
+  final IconData suffixIcon;
+
+  const PasswordTextField(
+      {super.key,
+      required this.hintText,
+      required this.prefixIcon,
+      required this.controller,
+      required this.obsecureText,
+      required this.suffixIcon});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      obscureText: obsecureText,
+      controller: controller,
+      decoration: InputDecoration(
+        prefixIcon: Icon(
+          prefixIcon,
+          color: AppColors.inputFieldPrimaryColor,
+        ),
+        hintText: hintText,
+        filled: true,
+        fillColor: AppColors.inputFieldSecondaryColor,
+        hintStyle: AppTypography.inputFieldPrimaryTextStyle,
+        constraints: BoxConstraints(
+          maxWidth: AppComponestsSizes(context)
+              .runningDeviceDimensionAdjustedWidth(305),
+        ),
+        suffixIcon: Icon(
+          suffixIcon,
+          color: AppColors.inputFieldPrimaryColor,
+        ),
+        border: const OutlineInputBorder(
+          borderRadius: BorderRadius.all(
+            Radius.circular(15),
+          ),
+        ),
+      ),
+    );
+  }
+}

gc_user/lib/ui/screens/auth/create_password.dart

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+import 'package:gc_user/core/style/colors.dart';
+import 'package:gc_user/core/style/sizes.dart';
+import 'package:gc_user/ui/components/auth/auth_button.dart';
+import 'package:gc_user/ui/components/auth/auth_text_field.dart';
+import 'package:gc_user/ui/components/auth/display_text.dart';
+import 'package:gc_user/ui/components/auth/password_text_field.dart';
+
+class CreatePasswordScreen extends StatefulWidget {
+  const CreatePasswordScreen({super.key});
+
+  @override
+  State<CreatePasswordScreen> createState() => _CreatePasswordScreenState();
+}
+
+class _CreatePasswordScreenState extends State<CreatePasswordScreen> {
+  late final TextEditingController _pwTextEditingController;
+  late final TextEditingController _cpwTextEditingController;
+
+  @override
+  void initState() {
+    super.initState();
+    _pwTextEditingController = TextEditingController();
+    _cpwTextEditingController = TextEditingController();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _pwTextEditingController.dispose();
+    _cpwTextEditingController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: AppComponestsSizes(context)
+          .runningDeviceDimensionAdjustedWidth(360.0),
+      height:
+          AppComponestsSizes(context).runningDeviceDimensionAdjustedHeight(716),
+      clipBehavior: Clip.antiAlias,
+      decoration: const BoxDecoration(color: AppColors.primaryBackgroundColor),
+      child: Stack(
+        children: [
+          Positioned(
+            left: AppComponestsSizes(context)
+                .runningDeviceDimensionAdjustedWidth(27.0),
+            top: AppComponestsSizes(context)
+                .runningDeviceDimensionAdjustedHeight(50.0),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              mainAxisAlignment: MainAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(
+                  child: Icon(
+                    Icons.arrow_back,
+                    color: Colors.white,
+                    size: 25,
+                  ),
+                ),
+                SizedBox(
+                    height: AppComponestsSizes(context)
+                        .runningDeviceDimensionAdjustedHeight(40.0)),
+                const SizedBox(
+                  child:
+                      DisplayText(text: 'Enter New \nPassword', fontSize: 33),
+                ),
+                SizedBox(
+                  height: AppComponestsSizes(context)
+                      .runningDeviceDimensionAdjustedHeight(15.0),
+                ),
+                const SizedBox(
+                  child: DisplayText(
+                      text:
+                          'The password must consists a letter,\ndigit and a special character. ',
+                      fontSize: 20),
+                ),
+                SizedBox(
+                  height: AppComponestsSizes(context)
+                      .runningDeviceDimensionAdjustedHeight(40.0),
+                ),
+                PasswordTextField(
+                  hintText: 'Enter your new password',
+                  prefixIcon: Icons.key,
+                  controller: _pwTextEditingController,
+                  obsecureText: true,
+                  suffixIcon: Icons.visibility_off,
+                ),
+                SizedBox(
+                  height: AppComponestsSizes(context)
+                      .runningDeviceDimensionAdjustedHeight(11.76),
+                ),
+                PasswordTextField(
+                  hintText: 'Confirm new password',
+                  prefixIcon: Icons.key,
+                  controller: _cpwTextEditingController,
+                  obsecureText: false,
+                  suffixIcon: Icons.visibility_rounded,
+                ),
+                SizedBox(
+                  height: AppComponestsSizes(context)
+                      .runningDeviceDimensionAdjustedHeight(11.76),
+                ),
+                const AuthButton(buttonText: 'SUBMIT', isDisabled: true),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

gc_user/lib/ui/components/onboarding/onboarding_screen.dart → gc_user/lib/ui/screens/onboarding/onboarding_screen.dart

@@ -3,18 +3,40 @@ import 'package:gc_user/core/style/colors.dart';
 import 'package:gc_user/core/style/sizes.dart';
 import 'package:gc_user/ui/components/onboarding/onboarding_button.dart';
 
+final List<Map<String, String>> screenList = [
+  {
+    'image': 'assets/flag.png',
+    'heading': 'INTRODUCING FOR THE FIRST TIME',
+    'description':
+        'The all new grand championship app\nwhich will update your score\nlike never before'
+  },
+  {
+    'image': 'assets/trophy.png',
+    'heading': 'INTRODUCING FOR THE FIRST TIME',
+    'description':
+        'Watch live scores of different games only on the grand championship app'
+  },
+  {
+    'image': 'assets/ground.png',
+    'heading': 'INTRODUCING FOR THE FIRST TIME',
+    'description':
+        'Catch the live scores fro the comfort of your room and find who’s the start player'
+  }
+];
+
 class OnboardingScreen extends StatelessWidget {
-  final String imagePath;
-  final String heading;
-  final String description;
-  const OnboardingScreen(
-      {super.key,
-      required this.imagePath,
-      required this.heading,
-      required this.description});
+  final int index; // Track the current page index
+  final List<Map<String, String>> screenList;
+  const OnboardingScreen({
+    super.key,
+    required this.index,
+    required this.screenList,
+  });
 
   @override
   Widget build(BuildContext context) {
+    final screen = screenList[index];
+
     return Scaffold(
       backgroundColor: AppColors.primaryBackgroundColor,
       body: Stack(
@@ -29,15 +51,15 @@ class OnboardingScreen extends StatelessWidget {
                 child: Align(
                   alignment: Alignment.topCenter,
                   child: Image(
-                    image: AssetImage(imagePath),
+                    image: AssetImage(screen['image']!),
                   ),
                 ),
               ),
               SizedBox(
                   height: AppComponestsSizes(context)
                       .runningDeviceDimensionAdjustedHeight(0.84 * 22)),
               Text(
-                heading,
+                screen['heading']!,
                 style: const TextStyle(
                   color: Colors.white,
                   fontSize: 22,
@@ -50,7 +72,7 @@ class OnboardingScreen extends StatelessWidget {
                   height: AppComponestsSizes(context)
                       .runningDeviceDimensionAdjustedHeight(0.84 * 12)),
               Text(
-                description,
+                screen['description']!,
                 style: const TextStyle(
                   color: Colors.white70,
                   fontSize: 16,
@@ -87,19 +109,46 @@ class OnboardingScreen extends StatelessWidget {
                 const SizedBox(
                   height: 200,
                 ),
-                const Align(
+                Align(
                   alignment: Alignment.centerLeft,
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      Icon(
-                        Icons.arrow_back_outlined,
-                        color: Colors.white,
-                      ),
-                      Icon(
-                        Icons.arrow_forward,
-                        color: Colors.white,
+                      GestureDetector(
+                        onTap: () {
+                          Navigator.push(
+                            context,
+                            MaterialPageRoute(
+                              builder: (context) => OnboardingScreen(
+                                index: index - 1,
+                                screenList: screenList,
+                              ),
+                            ),
+                          );
+                        },
+                        child: const Icon(
+                          Icons.arrow_back_outlined,
+                          color: Colors.white,
+                        ),
                       ),
+                      if (index < screenList.length - 1)
+                        GestureDetector(
+                          onTap: () {
+                            Navigator.push(
+                              context,
+                              MaterialPageRoute(
+                                builder: (context) => OnboardingScreen(
+                                  index: index + 1,
+                                  screenList: screenList,
+                                ),
+                              ),
+                            );
+                          },
+                          child: const Icon(
+                            Icons.arrow_forward,
+                            color: Colors.white,
+                          ),
+                        ),
                     ],
                   ),
                 )