Flutter. Incremente el poder de tu AppBar y SliverAppBar

Carlos Millan
18 junio, 2019

. . .

Traducción original en inglés

En Flutter, para crear una toolbar usamos el conocido AppBar, y cuando queremos una toolbar dinámica que cuando deslicemos nos muestre contenido, usamos el gran widget llamado SliverAppBar.

Estos widgets nos permiten agregar un toque de belleza a nuestra aplicación y, sin lugar a dudas, hacerlo en Flutter es muy simple.

He visto muchas preguntas en StackOverflow y en los grupos de Facebook sobre cómo podemos modificar la AppBar y la SliverAppBar, modificar en el sentido de cambiar el comportamiento o diseñar un poco.

Veamos estos 2 casos.

Caso 1

Queremos crear una AppBar que no esté pegada en la parte superior de la pantalla como lo hacemos normalmente. Pero también queremos que nuestra pantalla tenga un Drawer (menú lateral), y que nuestra AppBar responda al evento de abrir el Drawer. Es decir, queremos crear nuestra propia AppBar, con las dimensiones que queremos.

El problema es que, como sabemos, nuestro widget AppBar tiene un tamaño predeterminado y no podemos cambiarlo. Al revisar el código fuente, vemos el parámetro llamado appBar desde el Scaffold, vemos que acepta un widget de tipo PreferredSizeWidget, ahora revisamos el código fuente de AppBar y encontramos que es solo un StatefulWidget que implementa PreferredSizeWidget.

Ya lo tenemos, crearemos nuestro propio Widget que implementa PreferredSizeWidget.

Lo que queremos

Cómo lo hacemos para que al presionar el botón de menú de nuestra AppBar se abra el menú lateral.

Podemos hacerlo de 2 formas:

Usando el widget ‘AppBar’

Con esto, la AppBar es responsable de abrir el menú lateral si está dentro de un Scaffold.

Usando un widget personalizado

Con esto tenemos más flexibilidad, para hacerlo podemos usar GlobalKey del tipo ScaffoldState o el InheritedWidget de Scaffold, con el que tenemos acceso a los métodos del Estado con los que podemos abrir el Drawer.

Resultado

Simple, no? Veamos el segundo caso con la SliverAppBar.

Caso 2

Sabemos que SliverAppBar funciona de la siguiente manera:

Pero lo que queremos es colocar una Card incrustada en nuestra SliverAppBar como se muestra en la siguiente imagen.

Espere, pero el contenido que está dentro de SliverAppBar se recorta para que no pueda superar las restricciones, y ahora, ¿qué hacemos?

Tranquilo, veamos el código fuente de SliverAppBar, oh sorpresa, es un StatefulWidget que usa un SliverPersistentHeader en su interior, ese es el secreto.

Vamos a crear nuestro propio SliverPersistentHeaderDelegate para utilizar el SliverPersistentHeader.

Resultado

Hecho, ya tenemos resueltos nuestros 2 casos.

Puedes ver los ejemplos en el siguiente repositorio.

https://github.com/diegoveloper/flutter-samples/tree/master/lib/appbar_sliverappbar

Conclusión

Muchas veces nos desesperamos cuando no encontramos algunas de las propiedades de Widget que proporciona Flutter, pero siempre es una buena práctica verificar el código fuente de cómo se construyen los Widgets actuales para comprender cómo funciona Flutter y las diferentes opciones que tenemos para crear nuestro Widgets propios.

21

Deja un comentario

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

Comunidades en Español