iechevarria/app_notificaciones_ador
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

"Pantalla de carga e instrucciones de instalacion"

Browse Source
This commit is contained in:
iechevarria
2025-03-20 16:38:23 +01:00
parent a6cace0fe3
commit a5283edbd5
3 changed files with 402 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
lib/bars/app_bar
View File

@ -1,36 +1,37 @@
import 'package:flutter/material.dart'; 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 { class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
const CustomAppBar({Key? key}) : super(key: key); 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 @override
Widget build(BuildContext context) { 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( return AppBar(
toolbarHeight: appBarHeight,
title: const Text(''), title: const Text(''),
centerTitle: true, centerTitle: true,
backgroundColor: const Color.fromARGB(255, 78, 169, 6), backgroundColor: const Color.fromARGB(255, 78, 169, 6),
iconTheme: IconThemeData( iconTheme: const IconThemeData(
color: Colors.white, // Cambia este color al que desees color: Colors.white,
size: iconSize, // Ajustar el tamaño del icono
), ),
flexibleSpace: Container( flexibleSpace: Container(
padding: const EdgeInsets.all(8.0), padding: EdgeInsets.symmetric(vertical: logoPadding),
child: Center( child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Image.asset( child: Image.asset(
'assets/logo-civan.png', 'assets/logo-civan.png',
height: getResponsiveFontSize(context, 400.0), // Ajustar la altura de la imagen height: logoHeight,
width: getResponsiveFontSize(context, 400.0), // Ajustar el ancho de la imagen fit: BoxFit.contain,
),
), ),
), ),
), ),
@ -38,5 +39,8 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
} }
@override @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
}
} }

363
lib/pages/my_home_page.dart
View File

@ -123,80 +123,330 @@ class _MyHomePageState extends State<MyHomePage> {
final bool isAndroid = browserInfo['isAndroid']; final bool isAndroid = browserInfo['isAndroid'];
String title = "Instala CR-Civán en tu dispositivo"; String title = "Instala CR-Civán en tu dispositivo";
String instructions = "";
List<Widget> contentWidgets = []; List<Widget> contentWidgets = [];
// Instrucciones específicas según navegador y dispositivo // Instrucciones específicas según navegador y dispositivo
if (isIOS) { if (isIOS) {
if (browser == 'safari') { 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 = [ contentWidgets = [
Text("Para instalar esta aplicación en tu iPhone o iPad:"), Text("Para instalar esta aplicación en tu iPhone o iPad:"),
SizedBox(height: 16), 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), SizedBox(height: 16),
Text("Nota: La instalación de PWAs en iOS solo es compatible con Safari.", Text("Nota: La instalación de PWAs en iOS solo es compatible con Safari.",
style: TextStyle(fontStyle: FontStyle.italic)), style: TextStyle(fontStyle: FontStyle.italic)),
]; ];
} else { } else {
instructions = "Para instalar esta aplicación en iOS, debes abrir esta página en Safari.";
contentWidgets = [ contentWidgets = [
Text(instructions), Text("Para instalar esta aplicación en iOS, debes abrir esta página en Safari."),
SizedBox(height: 16), SizedBox(height: 16),
Text("Las PWAs en iOS solo pueden instalarse desde Safari.", 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)), style: TextStyle(fontStyle: FontStyle.italic)),
),
],
),
]; ];
} }
} else if (browser == 'chrome' || browser == 'edge') { } else if (browser == 'chrome' || browser == 'edge') {
String browserName = (browser == 'chrome') ? "Chrome" : "Edge"; String browserName = (browser == 'chrome') ? "Chrome" : "Edge";
IconData menuIcon = (browser == 'chrome') ? Icons.more_vert : Icons.more_horiz;
if (isAndroid) { 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";
} 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 = [ contentWidgets = [
Text("Para instalar esta aplicación en $browserName:"), Text("Para instalar esta aplicación en $browserName:"),
SizedBox(height: 16), SizedBox(height: 16),
Text(instructions), Row(
]; crossAxisAlignment: CrossAxisAlignment.start,
} else if (browser == 'firefox') { children: [
instructions = "1. Haz clic en el botón de menú (≡) en la esquina superior derecha\n" Text("1. "),
"2. Selecciona 'Instalar aplicación' (si está disponible)\n" Expanded(
"3. O añade manualmente esta página a tu pantalla de inicio"; child: RichText(
text: TextSpan(
contentWidgets = [ style: TextStyle(color: Colors.black),
Text("Para instalar esta aplicación en Firefox:"), children: [
SizedBox(height: 16), TextSpan(text: "Toca el botón de menú "),
Text(instructions), WidgetSpan(
SizedBox(height: 16), child: Icon(menuIcon, size: 18),
Text("Nota: Firefox tiene soporte limitado para PWAs en algunos sistemas.", alignment: PlaceholderAlignment.middle,
style: TextStyle(fontStyle: FontStyle.italic)), ),
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 {
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")),
],
),
];
}
} else if (browser == 'firefox') {
contentWidgets = [
Text("Para acceder rápidamente a esta aplicación en Firefox:"),
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(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),
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 { } 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 = [ contentWidgets = [
Text("Para instalar esta aplicación:"), Text("Para instalar esta aplicación:"),
SizedBox(height: 16), 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 // Mostrar el diálogo con instrucciones
showDialog( showDialog(
context: context, context: context,
builder: (context) => AlertDialog( builder: (context) {
title: Text(title), // 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,
),
),
),
],
),
content: SingleChildScrollView( content: SingleChildScrollView(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -205,12 +455,17 @@ class _MyHomePageState extends State<MyHomePage> {
), ),
), ),
actions: [ actions: [
TextButton( TextButton.icon(
icon: Icon(Icons.check, size: isSmallScreen ? 18 : 24),
label: Text(
"ENTENDIDO",
style: TextStyle(fontSize: isSmallScreen ? 13 : 14),
),
onPressed: () => Navigator.of(context).pop(), onPressed: () => Navigator.of(context).pop(),
child: Text("ENTENDIDO"),
), ),
], ],
), );
},
); );
} }
@ -301,12 +556,15 @@ class _MyHomePageState extends State<MyHomePage> {
); );
} }
// Primero ajustamos la función de tamaño responsivo para que devuelva valores más grandes
double getResponsiveFontSize(BuildContext context, double baseFontSize) { double getResponsiveFontSize(BuildContext context, double baseFontSize) {
double screenWidth = MediaQuery.of(context).size.width; double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 600) { if (screenWidth > 600) {
return baseFontSize * 1.5; // Aumentamos el multiplicador para pantallas grandes
return baseFontSize * 1.7; // Era 1.5
} else { } 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<MyHomePage> {
style: TextStyle( style: TextStyle(
color: Colors.blue, color: Colors.blue,
decoration: TextDecoration.underline, 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<MyHomePage> {
onPressed: mostrarAvisoLegal, onPressed: mostrarAvisoLegal,
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: 12, horizontal: 16, // Aumentado de 12 a 16
vertical: isVerySmallScreen ? 4 : 8 vertical: isVerySmallScreen ? 6 : 10 // Aumentado de 4:8 a 6:10
), ),
minimumSize: Size.zero, minimumSize: Size.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap, tapTargetSize: MaterialTapTargetSize.shrinkWrap,
@ -419,7 +678,8 @@ class _MyHomePageState extends State<MyHomePage> {
child: Text( child: Text(
'Aviso Legal', 'Aviso Legal',
style: TextStyle( 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<MyHomePage> {
// Botón de instalación con tamaño reducido - solo se muestra si es web y no está instalada // Botón de instalación con tamaño reducido - solo se muestra si es web y no está instalada
if (kIsWeb && !isAppInstalled) if (kIsWeb && !isAppInstalled)
ElevatedButton.icon( 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( label: Text(
"Instalar aplicación", "Instalar aplicación",
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: isVerySmallScreen ? 12 : 14, fontSize: isVerySmallScreen ? 14 : 16, // Aumentado de 12:14 a 14:16
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@ -442,8 +703,8 @@ class _MyHomePageState extends State<MyHomePage> {
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: Colors.green, backgroundColor: Colors.green,
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: 12, horizontal: 16, // Aumentado de 12 a 16
vertical: isVerySmallScreen ? 4 : 8 vertical: isVerySmallScreen ? 6 : 10 // Aumentado de 4:8 a 6:10
), ),
minimumSize: Size.zero, minimumSize: Size.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap, tapTargetSize: MaterialTapTargetSize.shrinkWrap,

64
web/index.html
View File

@ -28,7 +28,7 @@
<!-- Prevenir flash de fondo blanco con CSS --> <!-- Prevenir flash de fondo blanco con CSS -->
<style> <style>
body { body {
background-color: #000000; background-color: #4EA906; /* Verde de la aplicación */
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; height: 100vh;
@ -38,11 +38,12 @@
.initial-loader { .initial-loader {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
background-color: #000000; background-color: #4EA906; /* Verde de la aplicación */
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -51,8 +52,44 @@
} }
.initial-loader img { .initial-loader img {
width: 150px; width: 180px;
height: 150px; height: 180px;
filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.3));
margin-bottom: 20px;
}
.loader-text {
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
font-weight: 500;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
}
.progress-container {
width: 250px;
height: 8px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.progress-bar {
height: 100%;
width: 0%;
background-color: white;
border-radius: 10px;
transition: width 0.3s ease;
animation: loading 2.5s ease-in-out infinite;
}
@keyframes loading {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
} }
</style> </style>
@ -90,6 +127,10 @@
<!-- Pantalla de carga inicial para evitar parpadeo --> <!-- Pantalla de carga inicial para evitar parpadeo -->
<div id="initial-loader" class="initial-loader"> <div id="initial-loader" class="initial-loader">
<img src="icons/iconoCuadrado.png" alt="Cargando..."> <img src="icons/iconoCuadrado.png" alt="Cargando...">
<div class="loader-text">Cargando CR-Civán</div>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
</div> </div>
<script> <script>
@ -116,6 +157,21 @@
} }
}); });
}); });
// Simulación de progreso de carga
function updateProgress() {
let loadTime = 0;
const interval = setInterval(function() {
loadTime += 2;
if (loadTime > 100) {
clearInterval(interval);
}
}, 50);
}
window.addEventListener('load', function() {
updateProgress();
});
</script> </script>
<script src="main.dart.js" type="application/javascript"></script> <script src="main.dart.js" type="application/javascript"></script>
</body> </body>