Animación del NavBar de Pinterest con Flutter
En este tutorial aprenderemos como realizar la animación del NavBar de Pinterest
Este será el resultado que obtendrás al finalizar este tutorial
Lograr esta animación es bastante sencilla solo es de conocer los Widgets, así que adelante
Lo primero que haremos es crear un proyecto básico en flutter y nuestro home será el Widget PinterestPage:
Luego procedemos a crear el Widget del GridView y nuestro Custom NavBar
Ahora debemos actualizar nuestro PinterestPage y nos quedaría de la siguiente manera.
Listo tenemos el Grid y el Navbar, pero por mas Scroll que hagamos no se anima nuestro NavBar.
Antes de realizar la animación debemos entender o comprender que el Grid y el NavBar son Widgets separados y para comunicarse entre ellos tenemos varias alternativas la mayor parte de ellas son usando un package, pero en este tutorial usaremos solo lo que nos provee Flutter.
Para comunicar los widgets usaremos InheritedWidget, que aunque parezca complicado la realidad es que es bastante sencillo. Si lo desean entender de una manera sencilla les recomiendo el siguiente vídeo de Diego Velasquez
Primero crearemos nuestro BLoC que no es más que una clase que extiende de ChangeNotifier.
Ahora procedemos a crear nuestro InheritedWidget
Lo siguiente que debemos hacer es insertar nuestro InheritedWidget en un nivel del árbol de widgets donde todos sus hijos puedan acceder a él, en este caso sería nuestro PinterestPage ya que es el Widget padre del Grid y NavBar entonces procedemos a actualizar nuestro PinterestPage.
Ya teniendo el InheritedWidget insertado en nuestro árbol de widgets lo siguiente es realizar la lógica para lograr la animación que deseamos, para ellos usaremos ValueNotifier para indicarle al NavBar cuando debe mostrarse y ocultarse. Y para detectar cuando se haga scroll usaremos un ScrollController y agregando su listener. Importante no olvidar liberar los recursos al eliminar el Widget. Para esto usaremos el método dispose.
Ahora si desean entender un poco más cómo funciona el ScrollController y su Listener nuevamente les recomiendo un video de Diego Velasquez.
Bueno y la animación para cuando?
Aquí vamos con la animación, lo primero que debemos hacer es acceder al ScrollController que tenemos en nuestro BLoC y agregarlo al Grid, para ellos actualizamos nuestro Widget GridView.
Por último para realizar la animación primero debemos escuchar el ValueNotifier que esta en nuestro BLoC y para escuchar los cambios debemos hacer uso del Widget ValueListenableBuilder, bien estamos escuchando cuando mostrar u ocultar el NavBar pero no lo estamos ocultando y mostrando (animando), para ello hay varias alternativas. Pero en este caso al estar en un Stack podemos hacer uso del Widget AnimatedPositioned, entonces nuestro NavBar quedaría de la siguiente manera.
Listo con eso ya logramos la animación esperada.
Nota: Es importante aclarar que esta animación aplica o se puede lograr teniendo cualquier Widget que acepte ScrollController, ya sean CustomScrollView, GridView, ListView y algunos otros.
Te dejo mi repo en GitHub por si te llega a interesar
