Refactor login screen to be responsive

2 files changed, 141 insertions, 91 deletions

diff --git a/lib/screens/login_screen.dart b/lib/screens/login_screen.dart
index d4dc3a2..986b9e3 100644
--- a/lib/screens/login_screen.dart
+++ b/lib/screens/login_screen.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:pmsna1/widgets/loading_modal_widget.dart';
+import 'package:pmsna1/widgets/responsive.dart';
 import 'package:social_login_buttons/social_login_buttons.dart';
 
 class LoginScreen extends StatefulWidget {
@@ -36,105 +37,120 @@ class _LoginScreenState extends State<LoginScreen>
     super.dispose();
   }
 
+  Widget logoItc() => Padding(
+        padding: EdgeInsets.all(padding * 2),
+        child: Image.asset('assets/logo_itc.png', height: 120.0),
+      );
+
+  Widget loginForm() => Column(
+        children: [
+          spacer,
+          Container(
+            width: double.infinity,
+            alignment: Alignment.centerLeft,
+            padding: EdgeInsets.symmetric(horizontal: padding),
+            child: Text(
+              'Iniciar sesión',
+              style: Theme.of(context).textTheme.displaySmall,
+              textAlign: TextAlign.left,
+            ),
+          ),
+          Card(
+            margin: EdgeInsets.all(padding),
+            child: Padding(
+              padding: EdgeInsets.all(padding),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  TextField(
+                    controller: _emailController,
+                    decoration: const InputDecoration(
+                      border: OutlineInputBorder(),
+                      labelText: 'Correo electrónico',
+                      hintText: 'test@example.com',
+                    ),
+                    keyboardType: TextInputType.emailAddress,
+                  ),
+                  spacer,
+                  TextField(
+                    controller: _passwordController,
+                    obscureText: true,
+                    decoration: const InputDecoration(
+                      border: OutlineInputBorder(),
+                      labelText: 'Contraseña',
+                    ),
+                  ),
+                  spacer,
+                  SocialLoginButton(
+                    buttonType: SocialLoginButtonType.generalLogin,
+                    text: 'Iniciar sesión',
+                    backgroundColor: Theme.of(context).colorScheme.primary,
+                    onPressed: () {
+                      setState(() {
+                        isLoading = true;
+                      });
+                      Future.delayed(const Duration(seconds: 4))
+                          .whenComplete(() {
+                        setState(() {
+                          isLoading = false;
+                          Navigator.of(context).pushNamed('/dash');
+                        });
+                      });
+                    },
+                  ),
+                  spacer,
+                  const Divider(),
+                  spacer,
+                  SocialLoginButton(
+                    buttonType: SocialLoginButtonType.google,
+                    text: 'Iniciar sesión con Google',
+                    onPressed: () {},
+                  ),
+                  spacer,
+                  SocialLoginButton(
+                    buttonType: SocialLoginButtonType.facebook,
+                    text: 'Iniciar sesión con Facebook',
+                    onPressed: () {},
+                  ),
+                  spacer,
+                  SocialLoginButton(
+                    buttonType: SocialLoginButtonType.github,
+                    text: 'Iniciar sesión con GitHub',
+                    onPressed: () {},
+                  ),
+                  spacer,
+                  TextButton(
+                    onPressed: () {
+                      Navigator.of(context).pushNamed('/register');
+                    },
+                    child: const Text('Crear cuenta'),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      );
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Stack(
         children: [
           SingleChildScrollView(
-            child: Column(
-              children: [
-                Padding(
-                  padding: EdgeInsets.all(padding * 2),
-                  child: Image.asset('assets/logo_itc.png', height: 120.0),
-                ),
-                Container(
-                  width: double.infinity,
-                  alignment: Alignment.centerLeft,
-                  padding: EdgeInsets.symmetric(horizontal: padding),
-                  child: Text(
-                    'Iniciar sesión',
-                    style: Theme.of(context).textTheme.displaySmall,
-                    textAlign: TextAlign.left,
-                  ),
+            child: SafeArea(
+              child: Responsive(
+                mobile: Column(
+                  children: [logoItc(), loginForm()],
                 ),
-                Card(
-                  margin: EdgeInsets.all(padding),
-                  child: Padding(
-                    padding: EdgeInsets.all(padding),
-                    child: Column(
-                      mainAxisSize: MainAxisSize.min,
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      children: [
-                        TextField(
-                          controller: _emailController,
-                          decoration: const InputDecoration(
-                            border: OutlineInputBorder(),
-                            labelText: 'Correo electrónico',
-                            hintText: 'test@example.com',
-                          ),
-                          keyboardType: TextInputType.emailAddress,
-                        ),
-                        spacer,
-                        TextField(
-                          controller: _passwordController,
-                          obscureText: true,
-                          decoration: const InputDecoration(
-                            border: OutlineInputBorder(),
-                            labelText: 'Contraseña',
-                          ),
-                        ),
-                        spacer,
-                        SocialLoginButton(
-                          buttonType: SocialLoginButtonType.generalLogin,
-                          text: 'Iniciar sesión',
-                          backgroundColor:
-                              Theme.of(context).colorScheme.primary,
-                          onPressed: () {
-                            setState(() {
-                              isLoading = true;
-                            });
-                            Future.delayed(const Duration(seconds: 4))
-                                .whenComplete(() {
-                              setState(() {
-                                isLoading = false;
-                                Navigator.of(context).pushNamed('/dash');
-                              });
-                            });
-                          },
-                        ),
-                        spacer,
-                        const Divider(),
-                        spacer,
-                        SocialLoginButton(
-                          buttonType: SocialLoginButtonType.google,
-                          text: 'Iniciar sesión con Google',
-                          onPressed: () {},
-                        ),
-                        spacer,
-                        SocialLoginButton(
-                          buttonType: SocialLoginButtonType.facebook,
-                          text: 'Iniciar sesión con Facebook',
-                          onPressed: () {},
-                        ),
-                        spacer,
-                        SocialLoginButton(
-                          buttonType: SocialLoginButtonType.github,
-                          text: 'Iniciar sesión con GitHub',
-                          onPressed: () {},
-                        ),
-                        spacer,
-                        TextButton(
-                          onPressed: () {
-                            Navigator.of(context).pushNamed('/register');
-                          },
-                          child: const Text('Crear cuenta'),
-                        )
-                      ],
-                    ),
-                  ),
+                desktop: Row(
+                  children: [
+                    Expanded(child: logoItc()),
+                    Expanded(child: loginForm()),
+                  ],
                 ),
-              ],
+              ),
             ),
           ),
           isLoading ? const LoadingModal() : const SizedBox.shrink(),
diff --git a/lib/widgets/responsive.dart b/lib/widgets/responsive.dart
new file mode 100644
index 0000000..bd00872
--- /dev/null
+++ b/lib/widgets/responsive.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+class Responsive extends StatelessWidget {
+  final Widget mobile;
+  final Widget? tablet;
+  final Widget desktop;
+
+  const Responsive({
+    super.key,
+    required this.mobile,
+    this.tablet,
+    required this.desktop,
+  });
+
+  static bool isMobile(BuildContext context) =>
+      MediaQuery.of(context).size.width > 576;
+
+  static bool isTablet(BuildContext context) =>
+      MediaQuery.of(context).size.width >= 576 &&
+      MediaQuery.of(context).size.width <= 992;
+
+  static bool isDesktop(BuildContext context) =>
+      MediaQuery.of(context).size.width > 992;
+
+  @override
+  Widget build(BuildContext context) {
+    if (isDesktop(context)) {
+      return desktop;
+    } else if (tablet != null && isTablet(context)) {
+      return tablet!;
+    }
+    return mobile;
+  }
+}