From a5283edbd5f2463aae3e3df0cfeaabb06c2eed90 Mon Sep 17 00:00:00 2001 From: iechevarria Date: Thu, 20 Mar 2025 16:38:23 +0100 Subject: [PATCH] "Pantalla de carga e instrucciones de instalacion" --- lib/bars/app_bar | 42 ++-- lib/pages/my_home_page.dart | 377 ++++++++++++++++++++++++++++++------ web/index.html | 64 +++++- 3 files changed, 402 insertions(+), 81 deletions(-) diff --git a/lib/bars/app_bar b/lib/bars/app_bar index eb496c1..b9b9f0f 100644 --- a/lib/bars/app_bar +++ b/lib/bars/app_bar @@ -1,36 +1,37 @@ import 'package:flutter/material.dart'; -import 'package:crcivan/pages/utils.dart'; // Importar la función global +import 'package:crcivan/pages/utils.dart'; class CustomAppBar extends StatelessWidget implements PreferredSizeWidget { const CustomAppBar({Key? key}) : super(key: key); - double _getIconSize(BuildContext context) { - double screenWidth = MediaQuery.of(context).size.width; - return screenWidth > 600 ? 40.0 : 32.0; - } - @override Widget build(BuildContext context) { - double iconSize = _getIconSize(context); + // Determinar si estamos en una pantalla pequeña + final screenWidth = MediaQuery.of(context).size.width; + final isSmallScreen = screenWidth < 600; + + // Calcular la altura del AppBar dinámicamente + final appBarHeight = isSmallScreen ? 70.0 : 85.0; + + // Calcular el tamaño del logo - un tercio más pequeño que la propuesta anterior + final logoHeight = isSmallScreen ? 40.0 : 53.0; + final logoPadding = isSmallScreen ? 4.0 : 8.0; return AppBar( + toolbarHeight: appBarHeight, title: const Text(''), centerTitle: true, backgroundColor: const Color.fromARGB(255, 78, 169, 6), - iconTheme: IconThemeData( - color: Colors.white, // Cambia este color al que desees - size: iconSize, // Ajustar el tamaño del icono + iconTheme: const IconThemeData( + color: Colors.white, ), flexibleSpace: Container( - padding: const EdgeInsets.all(8.0), + padding: EdgeInsets.symmetric(vertical: logoPadding), child: Center( - child: Padding( - padding: const EdgeInsets.only(top: 10.0), - child: Image.asset( - 'assets/logo-civan.png', - height: getResponsiveFontSize(context, 400.0), // Ajustar la altura de la imagen - width: getResponsiveFontSize(context, 400.0), // Ajustar el ancho de la imagen - ), + child: Image.asset( + 'assets/logo-civan.png', + height: logoHeight, + fit: BoxFit.contain, ), ), ), @@ -38,5 +39,8 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget { } @override - Size get preferredSize => const Size.fromHeight(kToolbarHeight); // Tamaño fijo para el AppBar + Size get preferredSize { + // Altura dinámica según el tamaño de pantalla + return Size.fromHeight(85.0); // Valor ajustado para el logo más pequeño + } } diff --git a/lib/pages/my_home_page.dart b/lib/pages/my_home_page.dart index 02b9fc9..4254164 100644 --- a/lib/pages/my_home_page.dart +++ b/lib/pages/my_home_page.dart @@ -123,94 +123,349 @@ class _MyHomePageState extends State { final bool isAndroid = browserInfo['isAndroid']; String title = "Instala CR-Civán en tu dispositivo"; - String instructions = ""; List contentWidgets = []; // Instrucciones específicas según navegador y dispositivo if (isIOS) { if (browser == 'safari') { - instructions = "1. Toca el botón Compartir en la parte inferior de Safari (ícono de flecha hacia arriba)\n" - "2. Desplázate hacia abajo y selecciona 'Añadir a pantalla de inicio'\n" - "3. Confirma tocando 'Añadir'"; - contentWidgets = [ Text("Para instalar esta aplicación en tu iPhone o iPad:"), SizedBox(height: 16), - Text(instructions), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("1. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "Toca el botón Compartir "), + WidgetSpan( + child: Icon(Icons.ios_share, size: 18), + alignment: PlaceholderAlignment.middle, + ), + TextSpan(text: " en la parte inferior de Safari"), + ], + ), + ), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("2. "), + Expanded( + child: Text("Desplázate hacia abajo y selecciona 'Añadir a pantalla de inicio'"), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("3. "), + Expanded(child: Text("Confirma tocando 'Añadir'")), + ], + ), SizedBox(height: 16), Text("Nota: La instalación de PWAs en iOS solo es compatible con Safari.", style: TextStyle(fontStyle: FontStyle.italic)), ]; } else { - instructions = "Para instalar esta aplicación en iOS, debes abrir esta página en Safari."; contentWidgets = [ - Text(instructions), + Text("Para instalar esta aplicación en iOS, debes abrir esta página en Safari."), SizedBox(height: 16), - Text("Las PWAs en iOS solo pueden instalarse desde Safari.", - style: TextStyle(fontStyle: FontStyle.italic)), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.info_outline, color: Colors.blue), + SizedBox(width: 8), + Flexible( + child: Text("Las PWAs en iOS solo pueden instalarse desde Safari.", + style: TextStyle(fontStyle: FontStyle.italic)), + ), + ], + ), ]; } } else if (browser == 'chrome' || browser == 'edge') { String browserName = (browser == 'chrome') ? "Chrome" : "Edge"; + IconData menuIcon = (browser == 'chrome') ? Icons.more_vert : Icons.more_horiz; if (isAndroid) { - instructions = "1. Toca el botón de menú (⋮) en la esquina superior derecha\n" - "2. Selecciona 'Instalar aplicación' o 'Añadir a pantalla de inicio'\n" - "3. Confirma la instalación"; + contentWidgets = [ + Text("Para instalar esta aplicación en $browserName:"), + SizedBox(height: 16), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("1. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "Toca el botón de menú "), + WidgetSpan( + child: Icon(menuIcon, size: 18), + alignment: PlaceholderAlignment.middle, + ), + TextSpan(text: " en la esquina superior derecha"), + ], + ), + ), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("2. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "Selecciona 'Añadir a pantalla de inicio' "), + WidgetSpan( + child: Icon(Icons.add_to_home_screen, size: 18), + alignment: PlaceholderAlignment.middle, + ), + ], + ), + ), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("3. "), + Expanded(child: Text("Confirma la instalación")), + ], + ), + ]; } else { - instructions = "1. Haz clic en el icono de instalación que aparece en la barra de direcciones (icono ▽)\n" - "2. O bien, haz clic en el botón de menú (⋮) y selecciona 'Instalar CR-Civán...'\n" - "3. Confirma la instalación en el diálogo que aparece"; + contentWidgets = [ + Text("Para instalar esta aplicación en $browserName:"), + SizedBox(height: 16), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("1. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "Haz clic en el icono de instalación "), + WidgetSpan( + child: Icon(Icons.download, size: 18), + alignment: PlaceholderAlignment.middle, + ), + TextSpan(text: " que aparece en la barra de direcciones"), + ], + ), + ), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("2. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "O bien, haz clic en el botón de menú "), + WidgetSpan( + child: Icon(menuIcon, size: 18), + alignment: PlaceholderAlignment.middle, + ), + TextSpan(text: " y selecciona 'Instalar CR-Civán...'"), + ], + ), + ), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("3. "), + Expanded(child: Text("Confirma la instalación en el diálogo que aparece")), + ], + ), + ]; } - - contentWidgets = [ - Text("Para instalar esta aplicación en $browserName:"), - SizedBox(height: 16), - Text(instructions), - ]; } else if (browser == 'firefox') { - instructions = "1. Haz clic en el botón de menú (≡) en la esquina superior derecha\n" - "2. Selecciona 'Instalar aplicación' (si está disponible)\n" - "3. O añade manualmente esta página a tu pantalla de inicio"; - contentWidgets = [ - Text("Para instalar esta aplicación en Firefox:"), + Text("Para acceder rápidamente a esta aplicación en Firefox:"), SizedBox(height: 16), - Text(instructions), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("1. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "Toca el botón de menú "), + WidgetSpan( + child: Icon(Icons.menu, size: 18), + alignment: PlaceholderAlignment.middle, + ), + TextSpan(text: " en la esquina superior derecha"), + ], + ), + ), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("2. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "Selecciona 'Añadir a marcadores' o 'Añadir a pantalla de inicio' "), + WidgetSpan( + child: Icon(Icons.bookmark_add, size: 18), + alignment: PlaceholderAlignment.middle, + ), + ], + ), + ), + ), + ], + ), SizedBox(height: 16), - Text("Nota: Firefox tiene soporte limitado para PWAs en algunos sistemas.", - style: TextStyle(fontStyle: FontStyle.italic)), + Container( + padding: EdgeInsets.all(8), + decoration: BoxDecoration( + color: Colors.orange.withOpacity(0.2), + borderRadius: BorderRadius.circular(8), + ), + child: Row( + children: [ + Icon(Icons.info_outline, color: Colors.deepOrange, size: 20), + SizedBox(width: 8), + Expanded( + child: Text( + "Firefox tiene soporte limitado para instalar PWAs. Es posible que necesites usar Chrome para una instalación completa.", + style: TextStyle(fontStyle: FontStyle.italic), + ), + ), + ], + ), + ), ]; } else { - instructions = "1. Busca en el menú de tu navegador la opción 'Instalar aplicación' o 'Añadir a pantalla de inicio'\n" - "2. También puedes usar las opciones de marcadores/favoritos para acceder rápidamente"; - contentWidgets = [ Text("Para instalar esta aplicación:"), SizedBox(height: 16), - Text(instructions), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("1. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "Busca en el menú de tu navegador "), + WidgetSpan( + child: Icon(Icons.menu, size: 18), + alignment: PlaceholderAlignment.middle, + ), + TextSpan(text: " la opción 'Instalar aplicación' o 'Añadir a pantalla de inicio'"), + ], + ), + ), + ), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text("2. "), + Expanded( + child: RichText( + text: TextSpan( + style: TextStyle(color: Colors.black), + children: [ + TextSpan(text: "También puedes usar las opciones de marcadores "), + WidgetSpan( + child: Icon(Icons.bookmark, size: 18), + alignment: PlaceholderAlignment.middle, + ), + TextSpan(text: " para acceder rápidamente"), + ], + ), + ), + ), + ], + ), ]; } // Mostrar el diálogo con instrucciones showDialog( context: context, - builder: (context) => AlertDialog( - title: Text(title), - content: SingleChildScrollView( - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: contentWidgets, + builder: (context) { + // Detectar si es pantalla pequeña + final isSmallScreen = MediaQuery.of(context).size.width < 360; + + return AlertDialog( + title: Row( + children: [ + Icon(Icons.install_mobile, color: Colors.green, size: isSmallScreen ? 18 : 24), + SizedBox(width: 8), + Flexible( + child: Text( + isSmallScreen ? "Instalar CR-Civán" : title, + style: TextStyle( + fontSize: isSmallScreen ? 16 : 18, + fontWeight: FontWeight.bold, + ), + ), + ), + ], ), - ), - actions: [ - TextButton( - onPressed: () => Navigator.of(context).pop(), - child: Text("ENTENDIDO"), + content: SingleChildScrollView( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: contentWidgets, + ), ), - ], - ), + actions: [ + TextButton.icon( + icon: Icon(Icons.check, size: isSmallScreen ? 18 : 24), + label: Text( + "ENTENDIDO", + style: TextStyle(fontSize: isSmallScreen ? 13 : 14), + ), + onPressed: () => Navigator.of(context).pop(), + ), + ], + ); + }, ); } @@ -301,12 +556,15 @@ class _MyHomePageState extends State { ); } + // Primero ajustamos la función de tamaño responsivo para que devuelva valores más grandes double getResponsiveFontSize(BuildContext context, double baseFontSize) { double screenWidth = MediaQuery.of(context).size.width; if (screenWidth > 600) { - return baseFontSize * 1.5; + // Aumentamos el multiplicador para pantallas grandes + return baseFontSize * 1.7; // Era 1.5 } else { - return baseFontSize; + // Para pantallas pequeñas usamos un valor ligeramente mayor al base + return baseFontSize * 1.2; // Añadido multiplicador para pantallas pequeñas } } @@ -399,7 +657,8 @@ class _MyHomePageState extends State { style: TextStyle( color: Colors.blue, decoration: TextDecoration.underline, - fontSize: getResponsiveFontSize(context, 12), + fontSize: getResponsiveFontSize(context, 14), // Aumentado de 12 a 14 + fontWeight: FontWeight.w500, // Añadido para mejorar legibilidad ), ), ), @@ -410,8 +669,8 @@ class _MyHomePageState extends State { onPressed: mostrarAvisoLegal, style: ElevatedButton.styleFrom( padding: EdgeInsets.symmetric( - horizontal: 12, - vertical: isVerySmallScreen ? 4 : 8 + horizontal: 16, // Aumentado de 12 a 16 + vertical: isVerySmallScreen ? 6 : 10 // Aumentado de 4:8 a 6:10 ), minimumSize: Size.zero, tapTargetSize: MaterialTapTargetSize.shrinkWrap, @@ -419,7 +678,8 @@ class _MyHomePageState extends State { child: Text( 'Aviso Legal', style: TextStyle( - fontSize: getResponsiveFontSize(context, 12), + fontSize: getResponsiveFontSize(context, 14), // Aumentado de 12 a 14 + fontWeight: FontWeight.w500, // Añadido para mejor legibilidad ), ), ), @@ -429,12 +689,13 @@ class _MyHomePageState extends State { // Botón de instalación con tamaño reducido - solo se muestra si es web y no está instalada if (kIsWeb && !isAppInstalled) ElevatedButton.icon( - icon: Icon(Icons.download_rounded, color: Colors.white, size: isVerySmallScreen ? 14 : 16), + icon: Icon(Icons.download_rounded, color: Colors.white, + size: isVerySmallScreen ? 16 : 18), // Aumentado de 14:16 a 16:18 label: Text( "Instalar aplicación", style: TextStyle( color: Colors.white, - fontSize: isVerySmallScreen ? 12 : 14, + fontSize: isVerySmallScreen ? 14 : 16, // Aumentado de 12:14 a 14:16 fontWeight: FontWeight.bold, ), ), @@ -442,8 +703,8 @@ class _MyHomePageState extends State { style: ElevatedButton.styleFrom( backgroundColor: Colors.green, padding: EdgeInsets.symmetric( - horizontal: 12, - vertical: isVerySmallScreen ? 4 : 8 + horizontal: 16, // Aumentado de 12 a 16 + vertical: isVerySmallScreen ? 6 : 10 // Aumentado de 4:8 a 6:10 ), minimumSize: Size.zero, tapTargetSize: MaterialTapTargetSize.shrinkWrap, diff --git a/web/index.html b/web/index.html index 4c538f0..db2a057 100644 --- a/web/index.html +++ b/web/index.html @@ -28,7 +28,7 @@ @@ -90,6 +127,10 @@
Cargando... +
Cargando CR-Civán
+
+
+