added 3 screen mod to login

lib/core/utils/display_size_detector.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+enum DisplaySize {
+  extraSmall, //mobile
+  small, //tablet
+  medium, //laptop
+  large, //desktop
+}
+
+extension DisplaySizeDetector on Size {
+  DisplaySize get displaySize {
+    if (width < 600) {
+      return DisplaySize.extraSmall;
+    } else if (width < 1024) {
+      return DisplaySize.small;
+    } else if (width < 1440) {
+      return DisplaySize.medium;
+    } else {
+      return DisplaySize.large;
+    }
+  }
+
+  String get displaySizeName {
+    switch (displaySize) {
+      case DisplaySize.extraSmall:
+        return 'Mobile';
+      case DisplaySize.small:
+        return 'Tablet';
+      case DisplaySize.medium:
+        return 'Laptop';
+      case DisplaySize.large:
+        return 'Desktop';
+    }
+  }
+}

lib/view_models/login_view_model.dart

@@ -0,0 +1,42 @@
+// lib/view_models/login_view_model.dart
+import 'package:flutter/material.dart';
+
+class LoginViewModel with ChangeNotifier {
+  final TextEditingController usernameController = TextEditingController();
+  final TextEditingController passwordController = TextEditingController();
+
+  final FocusNode usernameFocus = FocusNode();
+  final FocusNode passwordFocus = FocusNode();
+
+  bool _obscurePassword = true;
+
+  LoginViewModel() {
+    usernameController.addListener(_onTextChanged);
+    passwordController.addListener(_onTextChanged);
+    usernameFocus.addListener(_onTextChanged);
+    passwordFocus.addListener(_onTextChanged);
+  }
+
+  bool get obscurePassword => _obscurePassword;
+  bool get isLoginEnabled =>
+      usernameController.text.isNotEmpty &&
+      passwordController.text.isNotEmpty;
+
+  void togglePasswordVisibility() {
+    _obscurePassword = !_obscurePassword;
+    notifyListeners();
+  }
+
+  void _onTextChanged() {
+    notifyListeners();
+  }
+
+  @override
+  void dispose() {
+    usernameController.dispose();
+    passwordController.dispose();
+    usernameFocus.dispose();
+    passwordFocus.dispose();
+    super.dispose();
+  }
+}

lib/views/login/login_desktop_screen.dart

@@ -0,0 +1,94 @@
+// lib/views/login_desktop_screen.dart
+import 'package:flutter/material.dart';
+import 'package:tm_app/core/routes/app_routes.dart';
+
+import '../../core/constants/assets.dart';
+import '../../core/constants/strings.dart';
+import '../../core/utils/size_config.dart';
+import 'widgets/widgets.dart';
+import '../../view_models/login_view_model.dart';
+
+class LoginDesktopScreen extends StatefulWidget {
+  const LoginDesktopScreen({super.key});
+
+  @override
+  State<LoginDesktopScreen> createState() => _LoginDesktopScreenState();
+}
+
+class _LoginDesktopScreenState extends State<LoginDesktopScreen> {
+  late final LoginViewModel _viewModel;
+
+  @override
+  void initState() {
+    super.initState();
+    _viewModel = LoginViewModel();
+  }
+
+  @override
+  void dispose() {
+    _viewModel.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    SizeConfig.init(context);
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+        child: SingleChildScrollView(
+          padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
+          child: SizedBox(
+            width: 120.0.w(),
+            child: ListenableBuilder(
+              listenable: _viewModel,
+              builder: (context, _) {
+                return Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    LoginLogo(width: 190.0.w(), height: 88.0.h()),
+                    SizedBox(height: 32.0.h()),
+                    const LoginTitle(),
+                    SizedBox(height: 32.0.h()),
+
+                    LoginTextField(
+                      controller: _viewModel.usernameController,
+                      focusNode: _viewModel.usernameFocus,
+                      label: AppStrings.usernameLabel,
+                      iconPath: AssetsManager.userIcon,
+                      fieldHeight: 60.0.h(),
+                      borderRedus: 4.0.w(),
+                      prefixIconPadding: 4.0.w(),
+                    ),
+                    SizedBox(height: 16.0.h()),
+
+                    LoginTextField(
+                      controller: _viewModel.passwordController,
+                      focusNode: _viewModel.passwordFocus,
+                      label: AppStrings.passwordLabel,
+                      iconPath: AssetsManager.passwordIcon,
+                      prefixIconPadding: 4.0.w(),
+                      isPassword: true,
+                      obscureText: _viewModel.obscurePassword,
+                      fieldHeight: 60.0.h(),
+                      onToggleVisibility: _viewModel.togglePasswordVisibility,
+                      borderRedus: 4.0.w(),
+                    ),
+                    SizedBox(height: 32.0.h()),
+
+                    BaseButton(
+                      isEnabled: _viewModel.isLoginEnabled,
+                      onPressed: _viewModel.isLoginEnabled
+                          ? () => HomeRouteData().go(context)
+                          : null,
+                    ),
+                  ],
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/views/login/login_mobile_screen.dart

@@ -0,0 +1,88 @@
+// lib/views/login_screen.dart
+import 'package:flutter/material.dart';
+import 'package:tm_app/core/routes/app_routes.dart';
+
+import '../../core/constants/assets.dart';
+import '../../core/constants/strings.dart';
+import '../../core/utils/size_config.dart';
+import 'widgets/widgets.dart';
+import '../../view_models/login_view_model.dart';
+
+class LoginMobileScreen extends StatefulWidget {
+  const LoginMobileScreen({super.key});
+
+  @override
+  State<LoginMobileScreen> createState() => _LoginMobileScreenState();
+}
+
+class _LoginMobileScreenState extends State<LoginMobileScreen> {
+  late final LoginViewModel _viewModel;
+
+  @override
+  void initState() {
+    super.initState();
+    _viewModel = LoginViewModel();
+  }
+
+  @override
+  void dispose() {
+    _viewModel.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    SizeConfig.init(context);
+
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+        child: SingleChildScrollView(
+          padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
+          child: ListenableBuilder(
+            listenable: _viewModel,
+            builder: (context, _) {
+              return Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  LoginLogo(width: 190.0.w(), height: 88.0.h()),
+                  SizedBox(height: 32.0.h()),
+                  const LoginTitle(),
+                  SizedBox(height: 32.0.h()),
+
+                  LoginTextField(
+                    controller: _viewModel.usernameController,
+                    focusNode: _viewModel.usernameFocus,
+                    label: AppStrings.usernameLabel,
+                    iconPath: AssetsManager.userIcon,
+                  ),
+                  SizedBox(height: 16.0.h()),
+
+                  LoginTextField(
+                    controller: _viewModel.passwordController,
+                    focusNode: _viewModel.passwordFocus,
+                    label: AppStrings.passwordLabel,
+                    iconPath: AssetsManager.passwordIcon,
+                    isPassword: true,
+                    obscureText: _viewModel.obscurePassword,
+                    onToggleVisibility: _viewModel.togglePasswordVisibility,
+                  ),
+                  SizedBox(height: 32.0.h()),
+
+                  BaseButton(
+                    isEnabled: _viewModel.isLoginEnabled,
+                    onPressed: _viewModel.isLoginEnabled
+                        ? () {
+                            HomeRouteData().go(context);
+                          }
+                        : null,
+                  ),
+                ],
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/views/login/login_screen.dart

@@ -1,103 +1,24 @@
-// lib/views/login_screen.dart
 import 'package:flutter/material.dart';
-import 'package:tm_app/core/routes/app_routes.dart';
+import 'package:tm_app/core/utils/display_size_detector.dart';
+import 'package:tm_app/views/login/login_desktop_screen.dart';
+import 'package:tm_app/views/login/login_mobile_screen.dart';
+import 'package:tm_app/views/login/login_tablet_screen.dart';
 
-import '../../core/constants/assets.dart';
+class LoginScreen extends StatelessWidget {
-import '../../core/constants/strings.dart';
-import '../../core/utils/size_config.dart';
-import 'widgets/widgets.dart';
-
-class LoginScreen extends StatefulWidget {
   const LoginScreen({super.key});
 
-  @override
-  State<LoginScreen> createState() => _LoginScreenState();
-}
-
-class _LoginScreenState extends State<LoginScreen> {
-  final _usernameController = TextEditingController();
-  final _passwordController = TextEditingController();
-
-  final _usernameFocus = FocusNode();
-  final _passwordFocus = FocusNode();
-
-  bool _obscurePassword = true;
-
-  bool get _isLoginEnabled =>
-      _usernameController.text.isNotEmpty &&
-      _passwordController.text.isNotEmpty;
-
-  @override
-  void initState() {
-    super.initState();
-    _usernameController.addListener(_updateState);
-    _passwordController.addListener(_updateState);
-    _usernameFocus.addListener(_updateState);
-    _passwordFocus.addListener(_updateState);
-  }
-
-  @override
-  void dispose() {
-    _usernameController.dispose();
-    _passwordController.dispose();
-    _usernameFocus.dispose();
-    _passwordFocus.dispose();
-    super.dispose();
-  }
-
-  void _updateState() => setState(() {});
-
-  void _togglePasswordVisibility() =>
-      setState(() => _obscurePassword = !_obscurePassword);
-
   @override
   Widget build(BuildContext context) {
-    SizeConfig.init(context);
+    final displaySize = MediaQuery.of(context).size.displaySize;
-    return Scaffold(
-      backgroundColor: Colors.white,
-      body: Center(
-        child: SingleChildScrollView(
-          padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              const LoginLogo(),
-              SizedBox(height: 32.0.h()),
-              const LoginTitle(),
-              SizedBox(height: 32.0.h()),
-              LoginTextField(
-                controller: _usernameController,
-                focusNode: _usernameFocus,
-                label: AppStrings.usernameLabel,
-                iconPath: AssetsManager.userIcon,
-              ),
 
-              SizedBox(height: 16.0.h()),
+    switch (displaySize) {
-
+      case DisplaySize.large:
-              LoginTextField(
+      case DisplaySize.medium:
-                controller: _passwordController,
+        return const LoginDesktopScreen();
-                focusNode: _passwordFocus,
+      case DisplaySize.small:
-                label: AppStrings.passwordLabel,
+        return const LoginTabletScreen();
-                iconPath: AssetsManager.passwordIcon,
+      case DisplaySize.extraSmall:
-                isPassword: true,
+        return const LoginMobileScreen();
-                obscureText: _obscurePassword,
+    }
-                onToggleVisibility: _togglePasswordVisibility,
-              ),
-
-              SizedBox(height: 32.0.h()),
-              BaseButton(
-                isEnabled: _isLoginEnabled,
-                onPressed:
-                    _isLoginEnabled
-                        ? () {
-                          HomeRouteData().go(context);
-                        }
-                        : null,
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
   }
 }

lib/views/login/login_tablet_screen.dart

@@ -0,0 +1,94 @@
+// lib/views/login_tablet_screen.dart
+import 'package:flutter/material.dart';
+import 'package:tm_app/core/routes/app_routes.dart';
+
+import '../../core/constants/assets.dart';
+import '../../core/constants/strings.dart';
+import '../../core/utils/size_config.dart';
+import 'widgets/widgets.dart';
+import '../../view_models/login_view_model.dart';
+
+class LoginTabletScreen extends StatefulWidget {
+  const LoginTabletScreen({super.key});
+
+  @override
+  State<LoginTabletScreen> createState() => _LoginTabletScreenState();
+}
+
+class _LoginTabletScreenState extends State<LoginTabletScreen> {
+  late final LoginViewModel _viewModel;
+
+  @override
+  void initState() {
+    super.initState();
+    _viewModel = LoginViewModel();
+  }
+
+  @override
+  void dispose() {
+    _viewModel.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    SizeConfig.init(context);
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+        child: SingleChildScrollView(
+          padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
+          child: SizedBox(
+            width: 120.0.w(),
+            child: ListenableBuilder(
+              listenable: _viewModel,
+              builder: (context, _) {
+                return Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    LoginLogo(width: 190.0.w(), height: 88.0.h()),
+                    SizedBox(height: 32.0.h()),
+                    const LoginTitle(),
+                    SizedBox(height: 32.0.h()),
+
+                    LoginTextField(
+                      controller: _viewModel.usernameController,
+                      focusNode: _viewModel.usernameFocus,
+                      label: AppStrings.usernameLabel,
+                      iconPath: AssetsManager.userIcon,
+                      fieldHeight: 60.0.h(),
+                      borderRedus: 4.0.w(),
+                      prefixIconPadding: 4.0.w(),
+                    ),
+                    SizedBox(height: 16.0.h()),
+
+                    LoginTextField(
+                      controller: _viewModel.passwordController,
+                      focusNode: _viewModel.passwordFocus,
+                      label: AppStrings.passwordLabel,
+                      iconPath: AssetsManager.passwordIcon,
+                      prefixIconPadding: 4.0.w(),
+                      isPassword: true,
+                      obscureText: _viewModel.obscurePassword,
+                      fieldHeight: 60.0.h(),
+                      onToggleVisibility: _viewModel.togglePasswordVisibility,
+                      borderRedus: 4.0.w(),
+                    ),
+                    SizedBox(height: 32.0.h()),
+
+                    BaseButton(
+                      isEnabled: _viewModel.isLoginEnabled,
+                      onPressed: _viewModel.isLoginEnabled
+                          ? () => HomeRouteData().go(context)
+                          : null,
+                    ),
+                  ],
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/views/login/widgets/login_logo.dart

@@ -1,13 +1,15 @@
 import 'package:flutter/material.dart';
 
 import '../../../core/constants/assets.dart';
-import '../../../core/utils/size_config.dart';
+// ignore: must_be_immutable
-
 class LoginLogo extends StatelessWidget {
-  const LoginLogo({super.key});
+ LoginLogo({required this.width,required this.height,super.key});
+
+  double width;
+  double height;
 
   @override
   Widget build(BuildContext context) {
-    return Image.asset(AssetsManager.logo, width: 190.0.w(), height: 88.0.h());
+    return Image.asset(AssetsManager.logo, );
   }
 }

lib/views/login/widgets/login_textfield.dart

@@ -12,6 +12,9 @@ class LoginTextField extends StatelessWidget {
   final String iconPath;
   final bool isPassword;
   final bool obscureText;
+  final double? borderRedus;
+  final double? fieldHeight;
+  final double? prefixIconPadding;
   final VoidCallback? onToggleVisibility;
 
   const LoginTextField({
@@ -22,52 +25,62 @@ class LoginTextField extends StatelessWidget {
     super.key,
     this.isPassword = false,
     this.obscureText = false,
+    this.fieldHeight,
     this.onToggleVisibility,
+    this.borderRedus,
+    this.prefixIconPadding,
   });
 
   @override
   Widget build(BuildContext context) {
-    return TextField(
+    return SizedBox(
-      controller: controller,
+      height: fieldHeight ?? 55.0.h(),
-      focusNode: focusNode,
+      child: TextField(
-      obscureText: isPassword ? obscureText : false,
+        controller: controller,
-      decoration: InputDecoration(
+        focusNode: focusNode,
-        labelText: label,
+        obscureText: isPassword ? obscureText : false,
-        prefixIcon: Padding(
+        decoration: InputDecoration(
-          padding: EdgeInsets.all(12.0.w()),
+          contentPadding: EdgeInsets.symmetric(
-          child: SvgPicture.asset(
+            vertical: (fieldHeight != null ? (fieldHeight! / 2.8) : 16.0).h(),
-            iconPath,
+            horizontal: 12.0.w(),
-            width: 24.0.w(),
+          ),
-            height: 24.0.h(),
+          labelText: label,
-            colorFilter: ColorFilter.mode(
+          prefixIcon: Padding(
-              focusNode.hasFocus ? Colors.black87 : Colors.grey,
+            padding: EdgeInsets.all(prefixIconPadding ?? 12.0.w()),
-              BlendMode.srcIn,
+            child: SvgPicture.asset(
+              iconPath,
+              width: 24.0.w(),
+              height: 24.0.h(),
+              colorFilter: ColorFilter.mode(
+                focusNode.hasFocus ? Colors.black87 : Colors.grey,
+                BlendMode.srcIn,
+              ),
             ),
           ),
-        ),
+          suffixIcon:
-        suffixIcon:
+              isPassword
-            isPassword
+                  ? IconButton(
-                ? IconButton(
+                    onPressed: onToggleVisibility,
-                  onPressed: onToggleVisibility,
+                    icon: SvgPicture.asset(
-                  icon: SvgPicture.asset(
+                      obscureText
-                    obscureText
+                          ? AssetsManager.passwordVisibility
-                        ? AssetsManager.passwordVisibility
+                          : AssetsManager.passwordVisibilityOff,
-                        : AssetsManager.passwordVisibilityOff,
+                      width: 24.0.w(),
-                    width: 24.0.w(),
+                      height: 24.0.h(),
-                    height: 24.0.h(),
+                      colorFilter: ColorFilter.mode(
-                    colorFilter: ColorFilter.mode(
+                        focusNode.hasFocus ? Colors.black87 : Colors.grey,
-                      focusNode.hasFocus ? Colors.black87 : Colors.grey,
+                        BlendMode.srcIn,
-                      BlendMode.srcIn,
+                      ),
                     ),
-                  ),
+                  )
-                )
+                  : null,
-                : null,
+          border: OutlineInputBorder(
-        border: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(borderRedus ?? 12.0.w()),
-          borderRadius: BorderRadius.circular(12.0.w()),
+          ),
-        ),
+          focusedBorder: OutlineInputBorder(
-        focusedBorder: OutlineInputBorder(
+            borderSide: BorderSide(color: AppColors.borderBlue),
-          borderSide: BorderSide(color: AppColors.borderBlue),
+            borderRadius: BorderRadius.circular(borderRedus ?? 12.0.w()),
-          borderRadius: BorderRadius.circular(12.0.w()),
+          ),
         ),
       ),
     );