Como ver los bordes de diseño en Flutter
Si alguna vez llegaste a programar en android nativo te habrás dado cuenta que a veces los elementos que colocabas en pantalla no quedaban bien alineados y para solucionarlo se tenia que recurrir a una función del sistema dentro de ajustes de desarrollo llamada Mostrar Limites de Diseño y con esa función activa ya era mucho mas fácil de acomodar los elementos de la aplicación y hacer que todo se viera como uno deseaba.
Que son los Bordes de Diseño
Es una función que permite ver de manera gráfica como está organizada la pantalla actual mostrando los limites de los elementos en tonos fluorescentes fáciles de identificar. Cabe destacar que en ingles se llaman Layout Bounds y la acción de utilizarlos se conoce como Depuración Visual (Visual Debbuging)
Limites de Diseño en Flutter
Al empezar a programar en Flutter deje de tener esta pequeña necesidad ya que parecía que Flutter se encargaba de ordenar todo de una manera muy eficiente y entonces cruzó por mi cabeza el como se vería mi aplicación usando los limites de diseño, seria posible que estuviera cometiendo algún error sin darme cuenta a simple vista y con los limites de diseño podría revisarlo, pero para mi sorpresa no se veían lo limites de diseño dentro de la app, solo en los elementos del sistema.
Como Mostrar los Limites de Diseño en Flutter
Aunque al principio me sorprendí, después de analizarlo un poco me pareció lógico ya que Flutter nos usa Views nativas del sistema, usa unas propias y por lo tanto la función (que si es nativa de android) no puede mostrar los limites de los elementos.
En ese momento hice lo que cualquier “buen” desarrollador haría; preguntar a la comunidad antes de investigar en la documentación oficial (nótese la ironía de la palabra “buen”). Cinco segundos después de hacer mi pregunta en el grupo de telegram se me ocurrió buscar en Google y en la documentación oficial, y ahí encontré que Flutter permite usar los limites de diseño con dos simples lineas de código.
Una librería y la función que muestra los limites
//Agregando la biblioteca de rendering
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled=true;
runApp(MyApp());
}Para poder usarlo solo basta con ponerlo al inicio de la función main() y con eso se mostraran los limites de diseño, no hay necesidad de que estén activados en las opciones de desarrollo
Listo! con eso podrás analizar tus pantallas y crear mejores diseños en tus aplicaciones, incluso identificar widgets tipo Padding, Container, etc, que no sean necesarios.
Notas Extra
Si se quiere conocer mas de los limites de diseño se puede consultar la documentación traducida al español
https://flutter-es.io/debugging/#depuraci%C3%B3n-visual
y la documentación en ingles
