¿Tu app Flutter se ve bien en todos los dispositivos?
¡Haz que tu texto sea siempre legible y profesional con técnicas de escalabilidad responsiva!
¿Por qué es importante el texto responsivo?
- Garantiza buena experiencia en móviles, tablets y web.
- Mejora la accesibilidad y la legibilidad.
- Evita textos cortados o demasiado pequeños/grandes.
¿Qué significa texto responsivo en Flutter?
Significa que el tamaño del texto se adapta automáticamente al tamaño de pantalla, densidad de píxeles y preferencias del usuario.
Técnicas básicas para texto responsivo
1. Usa MediaQuery para obtener el ancho/alto de pantalla
import 'package:flutter/material.dart';
class TextoResponsivo extends StatelessWidget {
final String texto;
TextoResponsivo(this.texto);
@override
Widget build(BuildContext context) {
double ancho = MediaQuery.of(context).size.width;
double fontSize = ancho * 0.05; // 5% del ancho
return Text(
texto,
style: TextStyle(fontSize: fontSize),
);
}
}2. Usa LayoutBuilder para adaptar el texto según el espacio disponible
LayoutBuilder(
builder: (context, constraints) {
double fontSize = constraints.maxWidth * 0.08;
return Text(
'Texto adaptable',
style: TextStyle(fontSize: fontSize),
);
},
)Widgets útiles para texto responsivo
1. FittedBox
FittedBox(
fit: BoxFit.scaleDown,
child: Text('Texto que nunca se desborda'),
)2. AutoSizeText (paquete externo)
Agrega en tu pubspec.yaml:
dependencies:
auto_size_text: ^3.0.0Ejemplo de uso:
import 'package:auto_size_text/auto_size_text.dart';
AutoSizeText(
'Texto que se ajusta automáticamente',
style: TextStyle(fontSize: 40),
maxLines: 2,
)Buenas prácticas para texto responsivo
- Usa
maxLinesyoverflowpara evitar textos cortados. - Prueba tu app en diferentes tamaños de pantalla y orientación.
- Considera la accesibilidad: respeta la configuración de tamaño de fuente del sistema (
MediaQuery.textScaleFactorOf(context)). - Usa unidades relativas (porcentaje del ancho/alto) en vez de valores fijos.
Ejemplo avanzado: Escalabilidad y accesibilidad
class TextoEscalable extends StatelessWidget {
final String texto;
TextoEscalable(this.texto);
@override
Widget build(BuildContext context) {
double ancho = MediaQuery.of(context).size.width;
double escala = MediaQuery.textScaleFactorOf(context);
double fontSize = ancho * 0.06 * escala;
return Text(
texto,
style: TextStyle(fontSize: fontSize),
maxLines: 2,
overflow: TextOverflow.ellipsis,
);
}
}Recursos útiles
¿Listo para que tu app Flutter se vea perfecta en cualquier dispositivo?
¡Con texto responsivo, tu UI será profesional y accesible para todos!
Explorar etiquetas