En el mundo del desarrollo móvil y web, ofrecer interfaces responsivas y adaptables es crucial para mejorar la experiencia del usuario. Esto es especialmente importante en aplicaciones Flutter, donde las dimensiones de la pantalla pueden variar drásticamente entre dispositivos. Hoy, exploraremos un enfoque basado en extensiones para escalar texto dinámicamente en Flutter utilizando breakpoints.
Código Propuesto
El siguiente código utiliza una extensión sobre la clase double para calcular un tamaño escalado basado en el ancho de pantalla. Además, define breakpoints comunes (como móvil, tablet y desktop) para adaptar dinámicamente los valores del texto.
Extensión DoubleX
extension DoubleX on double {
double sizeScaled(
double screenWidth, {
required double minSize,
}) {
const double minBP = BreakpointValues.mobile;
const double maxBP = BreakpointValues.desktop;
final maxSize = this;
double scaledSize;
if (screenWidth <= minBP) {
scaledSize = minSize;
} else if (screenWidth >= maxBP) {
scaledSize = maxSize;
} else {
final proportion = (screenWidth - minBP) / (maxBP - minBP);
final calculatedResize = minSize + (maxSize - minSize) * proportion;
scaledSize = calculatedResize.clamp(minSize, maxSize);
}
return scaledSize;
}
}
Valores de Breakpoints
class BreakpointValues {
static const double mobile = 400;
static const double mobileLarge = 600;
static const double tablet = 800;
static const double tabletLarge = 1200;
static const double desktop = 1200;
}
¿Cómo Funciona?
-
Extensión sobre
: La extensióndoubleDoubleXagrega la funcionalidadsizeScaleda cualquier valor decimal. -
Breakpoints: Los valores estáticos definidos en
BreakpointValuesrepresentan tamaños clave para categorizar dispositivos. -
Escalabilidad Dinámica: Basado en el ancho de pantalla (
screenWidth), la función ajusta el tamaño entre un valor mínimo (minSize) y un valor máximo (maxSize).
Ejemplo de Uso
Supongamos que queremos escalar dinámicamente el tamaño del texto en una pantalla según el ancho del dispositivo:
import 'package:flutter/material.dart';
class ResponsiveTextExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
body: Center(
child: Text(
'Texto responsivo',
style: TextStyle(
fontSize: 24.0.sizeScaled(
screenWidth,
minSize: 12.0, // Tamaño mínimo
),
),
),
),
);
}
}
¿Qué Hace Este Código?
-
MediaQuery:
Obtiene el ancho de la pantalla. -
sizeScaled:
Ajusta el tamaño del texto de manera proporcional según los breakpoints definidos. -
Escalabilidad:
Si el dispositivo es pequeño, el texto será más pequeño. En dispositivos grandes, tendrá un tamaño mayor.
Ventajas
-
Flexibilidad:
Escala dinámicamente entre valores mínimos y máximos. -
Adaptabilidad:
Es fácil de integrar en cualquier diseño responsivo. -
Reutilización:
Puedes usar la extensión en múltiples contextos (no solo texto).
Conclusión
Este enfoque con sizeScaled permite a los desarrolladores manejar diseños responsivos de forma más eficiente y reutilizable en Flutter. ¡Prueba el código y transforma tus interfaces en experiencias fluidas para cualquier dispositivo!
Gracias a 🚀
NUESTRO BLOG
Echa un vistazo a nuestros otros contenidos de calidad.
¡Nos encantaría conocer más sobre tu Proyecto !
Usuarios contentos
Proyectos entregados