Skip to content

fix(ui): responsive typography, tablet scaling and usability #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vgpastor merged 1 commit into from
Mar 27, 2026
Merged

fix(ui): responsive typography, tablet scaling and usability #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/version.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version": "0.1.11"}
{"version": "0.1.12"}
23 changes: 23 additions & 0 deletions lib/app.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,29 @@ class EmerKitApp extends StatelessWidget {
darkTheme: AppTheme.dark,
themeMode: ThemeMode.system,
routerConfig: appRouter,
builder: (context, child) {
final data = MediaQuery.of(context);
final shortSide = data.size.shortestSide;
// Tablets have shortestSide >= 600dp
// Scale text proportionally, composing with user preference
double extraScale;
if (shortSide >= 720) {
extraScale = 1.3;
} else if (shortSide >= 600) {
extraScale = 1.2;
} else {
extraScale = 1.0;
}
if (extraScale == 1.0) return child!;
// Compose: user's textScaler * our tablet factor
final userScale = data.textScaler.scale(1.0);
return MediaQuery(
data: data.copyWith(
textScaler: TextScaler.linear(userScale * extraScale),
),
child: child!,
);
},
);
}
}
66 changes: 42 additions & 24 deletions lib/features/about/presentation/about_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,12 @@ class AboutScreen extends StatelessWidget {
),
),
const SizedBox(height: 20),
const Text(
Text(
'EmerKit',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
style: Theme.of(context)
.textTheme
.headlineLarge!
.copyWith(fontWeight: FontWeight.bold),
),
const SizedBox(height: 4),
FutureBuilder<String>(
Expand All @@ -65,7 +68,10 @@ class AboutScreen extends StatelessWidget {
final version = snapshot.data ?? '...';
return Text(
'v$version',
style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
style: Theme.of(context)
.textTheme
.bodyLarge!
.copyWith(color: Colors.grey.shade600),
);
},
),
Expand All @@ -74,20 +80,23 @@ class AboutScreen extends StatelessWidget {
// Disclaimer
Card(
color: AppColors.severityModerate.withValues(alpha: 0.08),
child: const Padding(
padding: EdgeInsets.all(16),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.info_outline,
const Icon(Icons.info_outline,
size: 20, color: AppColors.severityModerate),
SizedBox(width: 12),
const SizedBox(width: 12),
Expanded(
child: Text(
'Esta aplicaci\u00f3n es una herramienta de referencia y apoyo. '
'No sustituye el juicio cl\u00ednico profesional ni la formaci\u00f3n sanitaria. '
'Los protocolos y valores deben contrastarse con las gu\u00edas oficiales vigentes.',
style: TextStyle(fontSize: 12, height: 1.4),
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(height: 1.4),
),
),
],
Expand All @@ -106,9 +115,12 @@ class AboutScreen extends StatelessWidget {
padding: const EdgeInsets.all(20),
child: Column(
children: [
const Text(
Text(
'Desarrollado por',
style: TextStyle(fontSize: 12, color: Colors.grey),
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.grey),
),
const SizedBox(height: 12),
Container(
Expand All @@ -132,20 +144,24 @@ class AboutScreen extends StatelessWidget {
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
Text(
'Global Emergency',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
style: Theme.of(context)
.textTheme
.titleLarge!
.copyWith(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'globalemergency.online',
style: TextStyle(
fontSize: 12,
color: AppColors.accent
.withValues(alpha: 0.8)),
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: AppColors.accent
.withValues(alpha: 0.8)),
),
],
),
Expand All @@ -162,10 +178,12 @@ class AboutScreen extends StatelessWidget {
const SizedBox(width: 4),
Text(
'Visitar web',
style: TextStyle(
fontSize: 12,
color:
AppColors.accent.withValues(alpha: 0.7)),
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: AppColors.accent
.withValues(alpha: 0.7)),
),
],
),
Expand Down
47 changes: 27 additions & 20 deletions lib/features/adr/presentation/adr_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,17 +114,19 @@ class AdrScreen extends StatelessWidget {
child: ListView(
padding: const EdgeInsets.all(12),
children: [
const Card(
Card(
child: Padding(
padding: EdgeInsets.all(16),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Panel naranja',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
SizedBox(height: 8),
Text('Número superior: Código de peligro (Kemler)\n'
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
const Text('Número superior: Código de peligro (Kemler)\n'
'Número inferior: Número ONU (identifica la materia)\n\n'
'X delante = reacción peligrosa con agua\n'
'Repetición de cifra = intensificación del peligro'),
Expand All @@ -133,31 +135,36 @@ class AdrScreen extends StatelessWidget {
),
),
const SizedBox(height: 8),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 4, vertical: 8),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
child: Text('Clases ADR',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(fontWeight: FontWeight.bold)),
),
..._classes.map((c) => Card(
margin: const EdgeInsets.only(bottom: 6),
child: ListTile(
leading: CircleAvatar(
backgroundColor: c.color,
child: Text(c.code,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
color: c.color == Colors.white ||
c.color == Colors.yellow
? Colors.black
: Colors.white,
)),
style:
Theme.of(context).textTheme.bodySmall!.copyWith(
fontWeight: FontWeight.bold,
color: c.color == Colors.white ||
c.color == Colors.yellow
? Colors.black
: Colors.white,
)),
),
title: Text('Clase ${c.code}: ${c.name}',
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 14)),
style: Theme.of(context)
.textTheme
.bodyLarge!
.copyWith(fontWeight: FontWeight.bold)),
subtitle: Text(c.description,
style: const TextStyle(fontSize: 12)),
style: Theme.of(context).textTheme.bodySmall),
),
)),
],
Expand Down
14 changes: 10 additions & 4 deletions lib/features/cincinnati/presentation/cincinnati_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ class _CincinnatiScreenState extends State<CincinnatiScreen> {
label: r.suspectedStroke ? 'SOSPECHA DE ICTUS' : 'SIN SOSPECHA',
subtitle: r.suspectedStroke ? 'Activar Codigo Ictus' : null,
color: r.severity.level.color,
severityLevel: r.severity.level,
)
: null,
toolBody: ListView(
Expand Down Expand Up @@ -115,13 +116,18 @@ class _CincinnatiScreenState extends State<CincinnatiScreen> {
const SizedBox(width: 8),
Expanded(
child: Text(title,
style: const TextStyle(
fontSize: 16, fontWeight: FontWeight.bold)),
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(fontWeight: FontWeight.bold)),
),
]),
const SizedBox(height: 4),
Text(instruction,
style: const TextStyle(fontSize: 12, color: Colors.grey)),
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.grey)),
const SizedBox(height: 12),
Row(children: [
Expanded(
Expand Down Expand Up @@ -178,7 +184,7 @@ class _CincinnatiScreenState extends State<CincinnatiScreen> {
fontWeight: FontWeight.bold,
color: selected ? color : Colors.grey)),
Text(description,
style: const TextStyle(fontSize: 10),
style: Theme.of(context).textTheme.labelSmall,
textAlign: TextAlign.center),
],
),
Expand Down
Loading