Una guía para usar el tamaño de la pantalla en Flutter: un enfoque más legible

Carlos Millan
10 octubre, 2019

. . .

Este artículo es traducido al español, si fuente original está en este post.

Obtener el tamaño de la pantalla en Flutter es trivial y no detallado (en su mayor parte). Así es como lo haces.

var screenSize = MediaQuery.of(context).size;
var width = screenSize.width;
var height = screenSize.height;

En ciertos diseños, será necesario que haga algunos cálculos sobre esos tamaños. También deberá reutilizarlos en diferentes widgets. Toma la imagen de abajo.

Aquí debes hacer algunas cosas. Tiene un contenedor de la mitad del tamaño de la altura de la pantalla (azul), otro contenedor de un tercio del tamaño de la altura de la pantalla (amarillo) y una barra de herramientas a la derecha (púrpura), teniendo en cuenta la altura de la barra de aplicaciones que se agrega al Scaffold . Veamos cómo se vería esto con reductores.

Comencemos haciendo un archivo llamado Screensize_reducers.dart y agregaremos primero una función screenSize con reductores básicos screenHeight y screenWidth que divide la altura por un número que pasamos. Predeterminado 1.

Size screenSize(BuildContext context) {
  return MediaQuery.of(context).size;
}
double screenHeight(BuildContext context, {double dividedBy = 1}) {
  return screenSize(context).height / dividedBy;
}
double screenWidth(BuildContext context, {double dividedBy = 1}) {
  return screenSize(context).width / dividedBy;
}

Asegúrese de tener un proyecto en ejecución y luego haga que su método build se vea así.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
        Container(
          color: Colors.blue[200],
          height: screenHeight(context,
              dividedBy: 2),
        ),
        Container(
            color: Colors.yellow[200],
            height: screenHeight(context,
                dividedBy: 3))
      ]),
    );
  }
}

Deberías estar viendo algo como esto.

El único problema con el uso de la altura de la pantalla proporcionada por MediaQuery es que cuando usa una barra de herramientas no lo tiene en cuenta, por lo que la altura siempre es incorrecta dado el espacio utilizable. Agreguemos una barra de herramientas al Scaffold y actualice nuestro método screenHeight para incorporar un nuevo valor. Crearemos una nueva función para hacer uso de este valor.

double screenHeight(BuildContext context, {double dividedBy = 1, double reducedBy = 0.0}) {
  return (screenSize(context).height - reducedBy) / dividedBy;
}
double screenHeightExcludingToolbar(BuildContext context, {double dividedBy = 1}) {
  return screenHeight(context, dividedBy: dividedBy, reducedBy: kToolbarHeight);
}
...
// Updated build function
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen Height')),
      body: Column(
        children: <Widget>[
        Container(
          color: Colors.blue[200],
          height: screenHeightExcludingToolbar(context,
              dividedBy: 2),
        ),
        Container(
            color: Colors.yellow[200],
            height: screenHeightExcludingToolbar(context,
                dividedBy: 3))
      ]),
    );
  }

Captura de pantalla al agregar la barra de aplicaciones y seguir utilizando la antigua función screenHeight.

Captura de pantalla con la nueva función ExcludingToolbar.

Solo para terminar el diseño, haga que su método build se vea así. Entonces debería verse como la captura de pantalla inicial que mostramos. Para mí, el código es mucho más fácil de leer, y eso es muy importante para el mantenimiento y la salud del código.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen Height')),
      body: Row(
        children: <Widget>[
          Expanded(
            child: Column(children: <Widget>[
              Container(
                color: Colors.blue[200],
                height: screenHeightExcludingToolbar(context, dividedBy: 2),
              ),
              Container(
                  color: Colors.yellow[200],
                  height: screenHeightExcludingToolbar(context, dividedBy: 3))
            ]),
          ),
          Container(
            width: 80.0,
            color: Colors.purple[300],
          )
        ],
      ),
    );
  }

No es una gran revelación, pero el uso de «context reducers» puede limpiar algunos códigos no deseados. Lo uso para obtener la mayoría de las cosas de mi contexto para que mi código sea fácil de leer. A continuación se muestra una copia completa de este archivo screen_size_reducers.dart

Size screenSize(BuildContext context) {
  return MediaQuery.of(context).size;
}
double screenHeight(BuildContext context,
    {double dividedBy = 1, double reducedBy = 0.0}) {
  return (screenSize(context).height - reducedBy) / dividedBy;
}
double screenWidth(BuildContext context,
    {double dividedBy = 1, double reducedBy = 0.0}) {
  return (screenSize(context).width - reducedBy) / dividedBy;
}
double screenHeightExcludingToolbar(BuildContext context,
    {double dividedBy = 1}) {
  return screenHeight(context, dividedBy: dividedBy, reducedBy: kToolbarHeight);
}

5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comunidades en Español