Diseño adaptativo y responsivo en Flutter
Es importante crear una app, ya sea para móvil o web, que responda a los cambios de tamaño y orientación y maximice el uso de cada plataforma.
Uno de los objetivos principales de Flutter es crear un framework que te permita desarrollar apps desde un único código base que se vean y se sientan geniales en cualquier plataforma.
Esto significa que tu app puede aparecer en pantallas de muchos tamaños diferentes, desde un reloj, pasando por un teléfono plegable con dos pantallas, hasta un monitor de alta definición. Y tu dispositivo de entrada puede ser un teclado físico o virtual, un mouse, una pantalla táctil o cualquier otra cantidad de dispositivos.
Dos términos que describen estos conceptos de diseño son adaptativo y responsivo. Idealmente, querrás que tu app sea ambas cosas, pero ¿qué significa exactamente esto?
¿Qué es responsivo vs adaptativo?
#Una forma fácil de pensarlo es que el diseño responsivo trata sobre ajustar la UI al espacio y el diseño adaptativo trata sobre hacer que la UI sea utilizable en el espacio.
Por lo tanto, una app responsiva ajusta la disposición de los elementos de diseño para encajar en el espacio disponible. Y una app adaptativa selecciona el diseño (layout) y los dispositivos de entrada apropiados para ser utilizable en el espacio disponible. Por ejemplo, ¿debería la UI de una tablet usar navegación inferior o navegación mediante un panel lateral?
Esta sección cubre varios aspectos del diseño adaptativo y responsivo:
A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.