added phone view and refactored

lib/pages/add_phone/view/add_phone_page_view.dart

@@ -1,14 +1,225 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_ecommerce_website_demo/pages/add_phone/view_model/add_phone_page_view_model.dart';
+import 'package:flutter_ecommerce_website_demo/services/form_service.dart';
+import 'package:flutter_ecommerce_website_demo/widgets/busy_button.dart';
+import 'package:flutter_ecommerce_website_demo/widgets/text_input/orange_text_form_field.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+import 'package:stacked/stacked.dart';
+
+import '../../../locator.dart';
 
 class AddPhonePageView extends StatelessWidget {
   const AddPhonePageView({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: Text('Add Phone Page',
-        style: Theme.of(context).textTheme.headline4,
-      ),
+    return ViewModelBuilder<AddPhonePageViewModel>.reactive(
+      viewModelBuilder: () => AddPhonePageViewModel(),
+      builder: (
+        BuildContext context,
+        AddPhonePageViewModel model,
+        Widget? child,
+      ) {
+        final _modelController = TextEditingController();
+        final _imageUrlController = TextEditingController();
+        final _socController = TextEditingController();
+        final _ramController = TextEditingController();
+        final _storageController = TextEditingController();
+        final _screenSizeController = TextEditingController();
+        final _batteryController = TextEditingController();
+        final _cameraController = TextEditingController();
+        final _priceController = TextEditingController();
+        final _stockController = TextEditingController();
+        final _sarContrller = TextEditingController();
+
+        final _modelInputfield = OrangeTextFormField(
+          controller: _modelController,
+          labelText: 'Model',
+          validator: model.validateModel,
+          keyboardType: TextInputType.text,
+        );
+        final _imageUrlInputfield = OrangeTextFormField(
+          controller: _imageUrlController,
+          labelText: 'Image Url',
+          validator: model.validateImageUrl,
+          keyboardType: TextInputType.url,
+        );
+        final _socInputfield = OrangeTextFormField(
+          controller: _socController,
+          labelText: 'Soc',
+          validator: model.validateSoc,
+          keyboardType: TextInputType.text,
+        );
+        final _ramInputfield = OrangeTextFormField(
+          controller: _ramController,
+          labelText: 'Ram',
+          validator: model.validateRam,
+          keyboardType: TextInputType.number,
+        );
+        final _storageInputfield = OrangeTextFormField(
+          controller: _storageController,
+          labelText: 'Storage',
+          validator: model.validateStorage,
+          keyboardType: TextInputType.text,
+        );
+        final _screenSizeInputfield = OrangeTextFormField(
+          controller: _screenSizeController,
+          labelText: 'Screen Size',
+          validator: model.validateScreenSize,
+          keyboardType: TextInputType.number,
+        );
+        final _batteryInputfield = OrangeTextFormField(
+          controller: _batteryController,
+          labelText: 'Battery',
+          validator: model.validateBattery,
+          keyboardType: TextInputType.number,
+        );
+        final _cameraInputfield = OrangeTextFormField(
+          controller: _cameraController,
+          labelText: 'Camera',
+          validator: model.validateCamera,
+          keyboardType: TextInputType.text,
+        );
+        final _priceInputfield = OrangeTextFormField(
+          controller: _priceController,
+          labelText: 'Price',
+          validator: model.validatePrice,
+          keyboardType: TextInputType.number,
+        );
+        final _stockInputfield = OrangeTextFormField(
+          controller: _stockController,
+          labelText: 'Stock',
+          validator: model.validateStock,
+          keyboardType: TextInputType.number,
+        );
+        final _sarInputfield = OrangeTextFormField(
+          controller: _sarContrller,
+          labelText: 'Sar',
+          validator: model.validateSar,
+          keyboardType: TextInputType.number,
+        );
+
+        final _addPhoneformFields = [
+          _modelInputfield,
+          _imageUrlInputfield,
+          _socInputfield,
+          _ramInputfield,
+          _storageInputfield,
+          _screenSizeInputfield,
+          _batteryInputfield,
+          _cameraInputfield,
+          _priceInputfield,
+          _stockInputfield,
+          _sarInputfield,
+        ];
+
+        return ResponsiveBuilder(builder: (context, sizingInformation) {
+          return SingleChildScrollView(
+            child: Align(
+              alignment: Alignment.topCenter,
+              child: AnimatedContainer(
+                constraints: sizingInformation.isDesktop
+                    ? const BoxConstraints(maxWidth: 1200)
+                    : BoxConstraints(
+                        maxWidth: sizingInformation.screenSize.width,
+                      ),
+                duration: const Duration(milliseconds: 60),
+                padding: sizingInformation.isDesktop
+                    ? const EdgeInsets.symmetric(horizontal: 90)
+                    : const EdgeInsets.symmetric(horizontal: 30),
+                child: Form(
+                  key: locator<FormService>().addPhoneFormKey,
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Add Phone',
+                        style: Theme.of(context).textTheme.headline2,
+                        softWrap: true,
+                        overflow: TextOverflow.visible,
+                      ),
+                      if (!sizingInformation.isMobile)
+                        Row(
+                          mainAxisSize: MainAxisSize.min,
+                          mainAxisAlignment: MainAxisAlignment.start,
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Expanded(
+                              child: Column(
+                                mainAxisSize: MainAxisSize.min,
+                                mainAxisAlignment: MainAxisAlignment.start,
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: _addPhoneformFields.sublist(0, 6).map(
+                                  (item) {
+                                    return Padding(
+                                      padding: const EdgeInsets.symmetric(
+                                        vertical: 9,
+                                      ),
+                                      child: item,
+                                    );
+                                  },
+                                ).toList(),
+                              ),
+                            ),
+                            const SizedBox(width: 18),
+                            Expanded(
+                              child: Column(
+                                mainAxisSize: MainAxisSize.min,
+                                mainAxisAlignment: MainAxisAlignment.start,
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: _addPhoneformFields.sublist(6).map(
+                                  (item) {
+                                    return Padding(
+                                      padding: const EdgeInsets.symmetric(
+                                        vertical: 9,
+                                      ),
+                                      child: item,
+                                    );
+                                  },
+                                ).toList(),
+                              ),
+                            ),
+                          ],
+                        )
+                      else
+                        ..._addPhoneformFields,
+                      BusyButton(
+                        title: 'Add Phone',
+                        busy: model.isBusy,
+                        onPressed: () {
+                          model.addPhone(
+                            context: context,
+                            model: _modelController.text,
+                            imageUrl: _imageUrlController.text,
+                            soc: _socController.text,
+                            ram: _ramController.text,
+                            storage: _storageController.text,
+                            screenSize: _screenSizeController.text,
+                            battery: _batteryController.text,
+                            camera: _cameraController.text,
+                            price: _priceController.text,
+                            stock: _stockController.text,
+                            sar: _sarContrller.text,
+                          );
+                        },
+                      ),
+                    ].map(
+                      (item) {
+                        return Padding(
+                          padding: const EdgeInsets.symmetric(vertical: 9),
+                          child: item,
+                        );
+                      },
+                    ).toList(),
+                  ),
+                ),
+              ),
+            ),
+          );
+        });
+      },
     );
   }
-}
+}

lib/pages/sign_up/view/sign_up_page_view.dart

@@ -41,32 +41,24 @@ class SignUpPageView extends StatelessWidget {
             TextEditingController();
 
         final OrangeTextFormField _firstNameInputField = OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'First Name',
           controller: _firstNameController,
           keyboardType: TextInputType.name,
           validator: model.validateFirstName,
         );
         final OrangeTextFormField _lastNameInputField = OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'Last Name',
           controller: _lastNameController,
           keyboardType: TextInputType.name,
           validator: model.validateLastName,
         );
         final OrangeTextFormField _emailInputField = OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'Email',
           controller: _emailController,
           keyboardType: TextInputType.emailAddress,
           validator: model.validateEmail,
         );
         final OrangeTextFormField _passwordInputField = OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'Password',
           controller: _passwordController,
           keyboardType: TextInputType.visiblePassword,
@@ -75,8 +67,6 @@ class SignUpPageView extends StatelessWidget {
         );
         final OrangeTextFormField _confirmPasswordInputField =
             OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'Confirmation Password',
           controller: _confirmPasswordController,
           keyboardType: TextInputType.visiblePassword,
@@ -92,33 +82,25 @@ class SignUpPageView extends StatelessWidget {
           isPasswordField: true,
         );
         final OrangeTextFormField _phoneNumberInputField = OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'Phone Number',
           controller: _phoneNumberController,
           keyboardType: TextInputType.phone,
           validator: model.validatePhoneNumber,
         );
         final OrangeTextFormField _streetAddressInputField =
             OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'Address',
           controller: _streetAddressController,
           keyboardType: TextInputType.text,
           validator: model.validateStreetAddress,
         );
         final OrangeTextFormField _cityInputField = OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'City',
           controller: _cityController,
           keyboardType: TextInputType.text,
           validator: model.validateCity,
         );
         final OrangeTextFormField _postalCodeInputField = OrangeTextFormField(
-          onChanged: (value) =>
-              locator<FormService>().signUpFormKey.currentState!.save(),
           labelText: 'Postal Code',
           controller: _postalCodeController,
           keyboardType: TextInputType.number,
@@ -187,7 +169,7 @@ class SignUpPageView extends StatelessWidget {
                           ],
                         ),
                       ),
-                      if (sizingInformation.isDesktop)
+                      if (!sizingInformation.isMobile)
                         Row(
                           mainAxisSize: MainAxisSize.min,
                           mainAxisAlignment: MainAxisAlignment.start,

lib/widgets/busy_button.dart

@@ -31,18 +31,19 @@ class _BusyButtonState extends State<BusyButton> {
             child: AnimatedContainer(
               duration: const Duration(milliseconds: 300),
               alignment: Alignment.center,
-              padding: const EdgeInsets.all(15),
+              padding: const EdgeInsets.all(12),
               decoration: BoxDecoration(
                 color: widget.enabled ? Colors.orange : Colors.grey[800],
-                borderRadius: BorderRadius.circular(6),
+                borderRadius: BorderRadius.circular(21),
               ),
               child: !widget.busy
                   ? Text(
                       widget.title,
-                      style: Theme.of(context)
-                          .textTheme
-                          .button!
-                          .copyWith(color: Colors.white),
+                      style: Theme.of(context).textTheme.button!.copyWith(
+                            color: Colors.white,
+                            fontWeight: FontWeight.w600,
+                            fontSize: 18,
+                          ),
                     )
                   : const CircularProgressIndicator(
                       strokeWidth: 2,