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: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
),
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
}
}

363
lib/pages/my_home_page.dart
View File

@ -123,80 +123,330 @@ class _MyHomePageState extends State<MyHomePage> {
final bool isAndroid = browserInfo['isAndroid'];
String title = "Instala CR-Civán en tu dispositivo";
String instructions = "";
List<Widget> 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.",
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";
} 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),
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:"),
SizedBox(height: 16),
Text(instructions),
SizedBox(height: 16),
Text("Nota: Firefox tiene soporte limitado para PWAs en algunos sistemas.",
style: TextStyle(fontStyle: FontStyle.italic)),
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 {
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 {
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),
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,
),
),
),
],
),
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
@ -205,12 +455,17 @@ class _MyHomePageState extends State<MyHomePage> {
),
),
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(),
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 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<MyHomePage> {
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<MyHomePage> {
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<MyHomePage> {
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<MyHomePage> {
// 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<MyHomePage> {
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,

64
web/index.html
View File

@ -28,7 +28,7 @@
<!-- Prevenir flash de fondo blanco con CSS -->
<style>
body {
background-color: #000000;
background-color: #4EA906; /* Verde de la aplicación */
margin: 0;
padding: 0;
height: 100vh;
@ -38,11 +38,12 @@
.initial-loader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background-color: #000000;
background-color: #4EA906; /* Verde de la aplicación */
position: fixed;
top: 0;
left: 0;
@ -51,8 +52,44 @@
}
.initial-loader img {
width: 150px;
height: 150px;
width: 180px;
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>
@ -90,6 +127,10 @@
<!-- Pantalla de carga inicial para evitar parpadeo -->
<div id="initial-loader" class="initial-loader">
<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>
<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 src="main.dart.js" type="application/javascript"></script>
</body>