lunes, 2 de agosto de 2021

Flutter Tip: Multiplicar en vez de dividir

Hay veces que queremos calcular el ancho o la altura de un widget y tomamos como referencia el espacio de pantalla disponible. Por ejemplo en el siguiente fragmento de código, la altura de cada Container es la mitad del tamaño de la pantalla o MediaQuery.of(context).size.height / 2.

Column(
       children: [
          Container(
            color: Colors.blue,
            height: MediaQuery.of(context).size.height / 2,
          ),
          Container(
            color: Colors.green,
            height: MediaQuery.of(context).size.height / 2,
          )
        ],
      )

Como podemos ver cada container ocupa la mitad de la pantalla:

Multiplicar en vez de dividir

Pero si el fragmento de código MediaQuery.of(context).size.height / 2 lo cambiamos por una multiplicación MediaQuery.of(context).size.height * 0.5 vamos a obtener algunas ventajas:

  • Es más fácil decir “La altura del widget es el 50% del tamaño de la pantalla” (0.5).
  • En varios post en stackoverflow se habla de que multiplicar es una operación menos costosa que una división 1, 2, 3.

Así que, el código después de reemplazarlo por la multiplicación quedaria asi:

Column(
        children: [
          Container(
            color: Colors.blue,
            height: MediaQuery.of(context).size.height * 0.5,
          ),
          Container(
            color: Colors.green,
            height: MediaQuery.of(context).size.height * 0.5,
          )
        ],
      )

¿Cómo quedaría el código si quiero que la altura del Container sea el 25% de la altura y el verde el 75% de la altura? Así:

Column(
        children: [
          Container(
            color: Colors.blue,
            height: MediaQuery.of(context).size.height * 0.25,
          ),
          Container(
            color: Colors.green,
            height: MediaQuery.of(context).size.height * 0.75,
          )
        ],
      )

Corre el código en tu navegador con dartpad y ve los resultados por ti mismo. También puedes ver el videotutorial de este artículo en youtube:

    

0 comments:

Publicar un comentario

Entradas populares