Widgets y estructura de árbol de Flutter

Por Darío Rivera

Publicado el 2021-02-27 en Flutter

Uno de los conceptos fundamentales de Flutter es que está basado completamente en Widgets. Esto quiere decir que para crear un contenedor debes utilizar un widget, para crear un botón debes utilizar un widget, para crear un simple texto debes utilizar un widget y así sucesivamente.

Entender los widgets, resulta para mí mucho más importante que empezar a codificar tu primer Hola Mundo, en especial si ya vienes con bases de programación de otros lenguajes. Vamos a ver algunos ejemplos de lo que te digo.

En Flutter puedes crear un ícono utilizando el widget Icon.

Icon(Icons.wifi_lock, color: Colors.lightBlue, size: 150);

Como ves este widget recibe la constante del ícono, el color, el size y otras cosas que no hemos colocado por simplicidad. Ahora bien si queremos crear un ícono al cual se le pueda dar click para accionar un evento debemos utilizar el widget IconButton.

IconButton(
    icon: Icon(Icons.wifi_lock, color: Colors.lightBlue, size: 150),
    onPressed: (){},
);

Observa que en este ejemplo se utiliza el widget anterior como propiedad de IconButton. Es decir, Icon es el valor de la propiedad icon del widget IconButton. Cualquiera de los ejemplos anteriores se vería así en Android.

Ahora imagina que queremos darle un padding al widget del ícono. Si sabes CSS sabrás que el padding es el espacio de relleno de un contenedor. En este caso y como en todos deberemos utilizar un widget, particularmente el widget Padding.

Padding(
    padding: EdgeInsets.fromLTRB(170, 0, 0, 0),
    child: IconButton(
        icon: Icon(Icons.wifi_lock, color: Colors.lightBlue, size: 150),
        onPressed: (){}
    )
)

Observa que el resultado es el esperado, con el método fromLTRB hemos definido un padding izquierdo de 170.

Todo esto nos lleva a un concepto interesante y es la estructura de árbol de la aplicación. Por lo general tendrás esta estructura ya que deberás encadenar widget tras widget. Supongamos ahora que queremos dar un background a nuestro widget. Para esto podemos utilizar el widget Container que vendría a ser como un elemento div en HTML. Es decir, un elemento genérico al cual le daremos un color de fondo.

Container(
  color: Colors.red,
  child: Padding(
      padding: EdgeInsets.fromLTRB(170, 0, 0, 0),
      child: IconButton(
          icon: Icon(Icons.wifi_lock, color: Colors.lightBlue),
          onPressed: (){},
          iconSize: 150
      )
  ),
),

El resultado sería el siguiente:

A medida que tu interfaz de usuario se vuelva más compleja tendrás una mayor profundidad en la estructura de árbol de la aplicación. Observa también que la manera de pasar parámetros en los widgets es mediante clave y valor (key: value), en donde la key será casi siempre child para encadenar widgets y el valor será el widget en cuestión.

Categorías