Flutter Widgets 08 | Scaffold
Hola gente, este es un tema que me parece importante, así que quise aportar a la comunidad Flutter en español esta traducción.
El artículo original en inglés fue escrito por NieBin y lo encuentras en este enlace.
En este tutorial, te contaré cómo usar el Scaffold y más en flutter.
Antes de empezar
En flutter el uso de Scaffold es muy importante y lo uso frecuentemente. Así que deberíamos saber como usarlo de la manera correcta. Hemos usado esto en todas nuestras páginas. Es un widget que es usado para contener otros widgets. Entonces miremos un ejemplo de uso.
Hemos utilizado la AppBar, el body es un widget, puede usar el widget que desees. Simplemente usamos el Container para mostrar un texto. Así se mostrará de la siguiente manera.
Constructor
Entonces, antes de comenzar nuestro tutorial, deberíamos conocer al constructor del Scaffold.
FloatingActionButton
Esto mostrará un botón en la parte inferior de la pantalla. Puede personalizar su propio Widget, pero por lo general, puede usar floatingActionButton. Veamos el código de la siguiente manera.
Si quieres que el botón se muestre en la parte inferior central, puedes cambiar el floatingActionButtonLocation a FloatingActionButtonLocation.centerFloat. Es fácil, verdad!!
El floatingActionButtonAnimator cambiará la animación de este botón. Esto es acerca de la animación, te lo diré en la parte de animación la próxima vez.
PersistentFooterButtons
Si estableces este parámetro, mostrará estos widgets al pie del Scaffold. Necesitas saber que este parámetro es un List. Veamos el código de abajo.
La parte persistentFooterButtons se mostrará debajo de la parte floatingButton.
Drawer
Este parámetro dibujará un drawer a la izquierda de la pantalla. Cuando das click al menú de la izquierda, te mostraré un drawer. Generalmente, ponemos un drawer widget aquí, si quieres poner otros widgets aquí, no importa, pero deberías personalizar tu propio drawer. Así que vamos a ver el constructor del drawer para ver como usarlo.
Sabemos que elevation controla la sombra del widget, el child es un widget común. El semanticLabel se dice antes. Es solo un string que describe el widget. Así que vamos a usarlo.
Hacemos click al widget menú para mostrar el drawer, pero si queremos mostrar nuestro botón personalizado, ¿Qué podemos hacer? Hay dos opciones para hacer.
1. Use the key
Así que podemos definir un key para el Scaffold.
Y establecer el key.
En la parte del persistentFooterButtons, tenemos dos botones, llamamos a la función openDrawer de primero.
Así que, cuando hacemos click al primer botón, mostrará el drawer.
2. Use the Context
Podemos hacer un Builder para envolver un botón.
Se mostrará de la siguiente manera cuando haga click al signo más “+” y adelante. Se mostrará el drawer.
El endDrawer es el mismo pero con diferente dirección y ubicación. Así que no voy a dar el ejemplo.
BottomNavigationBar
Esto es muy común en nuestra app real. Muestra que es un widget, pero generalmente, usamos el BottomNavigatorBar. Les mostrará en la parte inferior de la pantalla para cambiar la página.
BottomSheet
Este es un cuadro de diálogo que se muestra en la parte inferior de la pantalla pero sobre la bottomNavigationBar y los persistentFooterButtons. Puede utilizar la bottomSheet directamente de la siguiente manera.
Si usa como el bottomSheet: _bottomSheet (), se mostrará de la siguiente manera.
Además, puedes llamarlo iniciativa. Pero tenga cuidado, si desea utilizar estos códigos de abajo, debe cerrar la parte inferior antes. Entonces llama a la función.
BackgroundColor & primary
El backgroundColor es fácil. Solo cambie su color de fondo. El parámetro primario hará que el padding-top del Scaffold con la barra de estado sea cero. Cuando establezca primary = false, la pantalla se desplazará hacia arriba. Veamos el código y veramos el efecto.
Conclusión
Hoy, hemos aprendido el Scaffold, este es un widget muy importante . Hay algunos widgets, tales como el Drawer, BottomNavigatorBar, BottomSheet, FloatingActionButton, AppBar, PersistentFooterButtons para construir nuestro Scaffold. Espero que hayas aprendido a usarlos.
Gracias por su lectura.
Todo el código en GitHub: https://github.com/FlutterOpen/ebook
