Fix: duplicated form key for both form types

Author: abel3ri

devtools_options.yaml

@@ -0,0 +1 @@
+extensions:

lib/controllers/providers/form_provider.dart

@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
 
 class FormProvider with ChangeNotifier {
-  final _fromKey = GlobalKey<FormState>();
+  final _loginFormKey = GlobalKey<FormState>();
+  final _signUpFormKey = GlobalKey<FormState>();
   bool _showPassword = false;
   final _emailController = TextEditingController();
   final _passwordController = TextEditingController();
@@ -18,5 +19,6 @@ class FormProvider with ChangeNotifier {
   TextEditingController get emailController => _emailController;
   TextEditingController get passwordController => _passwordController;
   TextEditingController get rePasswordController => _rePasswordController;
-  get formKey => _fromKey;
+  GlobalKey<FormState> get loginFormKey => _loginFormKey;
+  GlobalKey<FormState> get signUpFormKey => _signUpFormKey;
 }

lib/router/router.dart

@@ -3,7 +3,6 @@ import "package:dbu_gym/views/pages/login_page.dart";
 import "package:dbu_gym/views/pages/not_found_page.dart";
 import "package:dbu_gym/views/pages/welcome_page.dart";
 import 'package:dbu_gym/views/pages/sign_up_page.dart';
-import 'package:dbu_gym/views/pages/sign_up_intermediate_page.dart';
 
 class AppRouter {
   static final router = GoRouter(
@@ -23,11 +22,11 @@ class AppRouter {
         name: "signup",
         builder: (context, state) => SignUpPage(),
       ),
-      GoRoute(
-        path: "/signup-intermediate",
-        name: "signup-intermediate",
-        builder: (context, state) => SignUpIntermediatePage(),
-      ),
+      // GoRoute(
+      //   path: "/signup-intermediate",
+      //   name: "signup-intermediate",
+      //   builder: (context, state) => SignUpIntermediatePage(),
+      // ),
     ],
     errorBuilder: (context, state) => PageNotFound(),
   );

lib/views/pages/login_page.dart

@@ -1,12 +1,14 @@
 import 'package:dbu_gym/views/widgets/widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
 
 class LoginPage extends StatelessWidget {
   const LoginPage({super.key});
 
   @override
   Widget build(BuildContext context) {
+    // final formKey = GlobalKey<FormState>();
     return Scaffold(
       appBar: AppBar(
         leading: IconButton(
@@ -24,7 +26,9 @@ class LoginPage extends StatelessWidget {
           padding: EdgeInsets.symmetric(
             horizontal: 28,
           ),
-          child: FormWidget(formType: "Login"),
+          child: FormWidget(
+            formType: "Login",
+          ),
         ),
       ),
     );

lib/views/pages/sign_up_intermediate_page.dart

@@ -7,6 +7,7 @@ class SignUpPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // final formKey = GlobalKey<FormState>();
     return Scaffold(
       appBar: AppBar(
         leading: IconButton(
@@ -24,7 +25,9 @@ class SignUpPage extends StatelessWidget {
           padding: EdgeInsets.symmetric(
             horizontal: 28,
           ),
-          child: FormWidget(formType: "Sign up"),
+          child: FormWidget(
+            formType: "Sign up",
+          ),
         ),
       ),
     );

lib/views/pages/sign_up_page.dart

@@ -19,13 +19,15 @@ class FormWidget extends StatelessWidget {
     return SingleChildScrollView(
       physics: BouncingScrollPhysics(),
       padding: EdgeInsets.only(
-        top: MediaQuery.of(context).size.height * 0.1,
+        top: formType == "Login"
+            ? MediaQuery.of(context).size.height * 0.1
+            : MediaQuery.of(context).size.height * 0.05,
       ),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text(
-            formType == "Login" ? "Welcome back!" : "It Won't take long!",
+            formType == "Login" ? "Welcome back!" : "It won't take long!",
             style: Theme.of(context).textTheme.titleLarge!.copyWith(
                   color: Theme.of(context).primaryColor,
                   fontWeight: FontWeight.bold,
@@ -40,7 +42,9 @@ class FormWidget extends StatelessWidget {
           ),
           SizedBox(height: MediaQuery.of(context).size.height * 0.02),
           Form(
-            key: formProvider.formKey,
+            key: formType == "Login"
+                ? formProvider.loginFormKey
+                : formProvider.signUpFormKey,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
@@ -49,7 +53,7 @@ class FormWidget extends StatelessWidget {
                   decoration: InputDecoration(
                     label: Text("E-mail"),
                     labelStyle: TextStyle(color: Colors.grey),
-                    hintText: "abebe@yahoo.com",
+                    hintText: "abebe@example.com",
                     prefixIcon: Icon(Icons.email),
                     prefixIconColor: Colors.grey,
                   ),
@@ -96,45 +100,61 @@ class FormWidget extends StatelessWidget {
                     return null;
                   },
                 ),
-                formType == "Sign up"
-                    ? SizedBox(
-                        height: MediaQuery.of(context).size.height * 0.015,
-                      )
-                    : SizedBox(),
-                formType == "Sign up"
-                    ? TextFormField(
-                        controller: formProvider.rePasswordController,
-                        decoration: InputDecoration(
-                          label: Text("Re-enter password"),
-                          labelStyle: TextStyle(color: Colors.grey),
-                          prefixIcon: Icon(Icons.password),
-                          prefixIconColor: Colors.grey,
-                        ),
-                        obscureText: formProvider.showPassword ? false : true,
-                        textInputAction: TextInputAction.done,
-                        validator: (value) {
-                          if (value!.isEmpty)
-                            return "Please provide a password.";
+                if (formType == "Sign up")
+                  SizedBox(
+                    height: MediaQuery.of(context).size.height * 0.015,
+                  ),
+                if (formType == "Sign up")
+                  TextFormField(
+                    controller: formProvider.rePasswordController,
+                    decoration: InputDecoration(
+                      label: Text("Re-enter password"),
+                      labelStyle: TextStyle(color: Colors.grey),
+                      prefixIcon: Icon(Icons.password),
+                      prefixIconColor: Colors.grey,
+                    ),
+                    obscureText: formProvider.showPassword ? false : true,
+                    textInputAction: TextInputAction.done,
+                    validator: (value) {
+                      if (value!.isEmpty) return "Please provide a password.";
 
-                          if (value.length < 8) {
-                            return "Password must be at least 8 characters.";
-                          }
-                          if (formProvider.passwordController.text != value) {
-                            return "Password do not match";
-                          }
-                          return null;
-                        },
-                      )
-                    : SizedBox(),
+                      if (value.length < 8) {
+                        return "Password must be at least 8 characters.";
+                      }
+                      if (formProvider.passwordController.text != value) {
+                        return "Password do not match";
+                      }
+                      return null;
+                    },
+                  ),
+                if (formType == "Sign up")
+                  SizedBox(height: MediaQuery.of(context).size.height * 0.01),
+                if (formType == "Sign up")
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(
+                        "Sign up as new user",
+                        style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                              color: Theme.of(context).primaryColor,
+                            ),
+                      ),
+                      Switch(value: false, onChanged: (value) {})
+                    ],
+                  ),
                 SizedBox(
                   height: MediaQuery.of(context).size.height * 0.02,
                 ),
                 FilledButton(
                   onPressed: () {
-                    if ((Provider.of<FormProvider>(context, listen: false)
-                            .formKey as GlobalKey<FormState>)
-                        .currentState!
-                        .validate()) {}
+                    if (formType == "Login") {
+                      // valid login inputs
+                      if (formProvider.loginFormKey.currentState!.validate()) {}
+                    } else {
+                      // valid sign up inputs
+                      if (formProvider.signUpFormKey.currentState!
+                          .validate()) {}
+                    }
                   },
                   child: Text(formType == "Login" ? "Login" : "Sign up"),
                 ),

lib/views/widgets/widgets.dart

@@ -73,6 +73,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.17"
+  ethiopian_calendar:
+    dependency: "direct main"
+    description:
+      name: ethiopian_calendar
+      sha256: "1577a02138eb2d279c6300dff059a4ec9d805d838d848b2ece769fd0b7895580"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.2"
   fake_async:
     dependency: transitive
     description:
@@ -184,6 +192,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.0.2"
+  intl:
+    dependency: transitive
+    description:
+      name: intl
+      sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.18.1"
   js:
     dependency: transitive
     description:
@@ -320,6 +336,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.1.1"
+  simple_gesture_detector:
+    dependency: transitive
+    description:
+      name: simple_gesture_detector
+      sha256: ba2cd5af24ff20a0b8d609cec3f40e5b0744d2a71804a2616ae086b9c19d19a3
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -365,6 +389,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
+  table_calendar:
+    dependency: "direct main"
+    description:
+      name: table_calendar
+      sha256: "1e3521a3e6d3fc7f645a58b135ab663d458ab12504f1ea7f9b4b81d47086c478"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.9"
   term_glyph:
     dependency: transitive
     description:

pubspec.lock

@@ -43,7 +43,8 @@ dependencies:
   provider: ^6.1.1
   go_router: ^13.2.0
   email_validator: ^2.1.17
-
+  ethiopian_calendar: ^0.0.2
+  table_calendar: ^3.0.9
 dev_dependencies:
   flutter_test:
     sdk: flutter