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 post 1, post 2, post 3.

Así que, el código después de reemplazarlo por la multiplicación quedara 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,
          )
        ],
      )

Ejemplo en tu navegador

Corre el código en DartPad y ve los resultados por ti mismo: