Escalabilidad de Texto Responsivo en Flutter

¿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.0

Ejemplo 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 maxLines y overflow para 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

• Documentación oficial de Flutter: Responsive design
• auto_size_text package
• FittedBox widget

---

¿Listo para que tu app Flutter se vea perfecta en cualquier dispositivo?
¡Con texto responsivo, tu UI será profesional y accesible para todos!