Widgets Básicos en Flutter
Que tal gente por aquí de nuevo para reforzar o aprender de la documentación y widgets básicos de nuestro lenguaje de programación móvil favorito, Flutter!
Cuales son los widgets básicos?
Empecemos primero que nada definiendo de donde y como decido yo cuales son los widgets definidos de esta forma, y encontraremos esto nada mas y nada menos que en la documentación de Flutter, sin sorpresas hasta aquí!
Listemos entonces cual nos definen nuestros amigos del equipo de Flutter como básicos:
- Container
- Row
- Column
- Image
- Text
- Icon
- RaiseButton
- Scaffold (Ya hablamos este en el post anterior)
- Appbar (…de este también, bueno solo un poco!)
- FlutterLogo (Básico solo por que es nuestro logo favorito)
- Placeholder
Con estos widgets podemos crear una app funcional básica, con un layout que podría decirse «decente» dando un formato de renglones, columnas, mostrar imágenes, realizar alguna acción que se ejecute al presionar un botón utilizar iconos dentro del AppBar, del mismo botón o solamente mostrar un icono de los preexistentes en el motor de Flutter y el placeholder para definir donde podría ir algo y dejar ese espacio reservado para un futuro. Claro esta que aquí no se está realizando ninguna petición de ningún tipo a ninguna lado (sea API, Firestore or alguna bd local como Sqflite) básicamente estaríamos entregando una app con información ya predefinida o bien estática y lo digo así porque también pueden hacer animaciones lo cual dejarían de definirla como estática en cuestión de UX/UI, ya hablaremos de animaciones básicas como las Hero mas adelante.
Container
Personalmente pienso que este widget es no solo básico si no de los mas importante que necesitamos conocer y el cual tiene muchas propiedad y sus propiedades tienes propiedad 😂 y así…
veamos su constructor:
Tiene cosas importante que tomar a consideración como, si buscas tener un padding ya contiene uno y no es necesario envolver el Container en un widget Padding, de cualquier forma esto esta permitido y no es una regla, puedes necesitar cierto comportamiento específico y usado constantemente, por otro lado, si tienes definido un color en el Container y después decides utilizar la propiedad decorator esto marcara un error ya que el color deberá ser definido dentro de la propiedad decorator, ya lo veremos en acción.
Row y Column
Aunque sus nombres son explicativos, nos regalaremos una lineas para explicarlo acompañados de un par de imágenes que su se han paseado por la documentación de seguro las conocen, veámoslas:
Como pueden ver en las imágenes es muy fácil de comprender como es el uso de este par de widgets, les puede ayudar a ir pensando la forma de como separar su interfaz en renglones y columnas, lo mas importante de estos widgets seria que este es uno de los cuales aceptan no uno si no un conjunto de widgets dentro de ellos y que puedes anidarse entre ellos sin ningún problema es decir un Row dentro de un Column que esta en un Row y así y así… Una de las cosas siempre a tomar a consideración es que si se ponen demasiados childs dentro de un Row o un Column este puede provocar un overflow (desborde) de pixeles lo cual ustedes conocer con una linea de color amarilla con negro, esto quiere decir que estos no pueden por si mismo ser mas grandes que la pantalla que los contiene, para esto se pueden utilizar un widget ListView u otros más del universo de Flutter que ayudan en esto, ya hablaremos de ellos mas en otro post.
Antes de cambiar de widget veamos sus constructores y hablemos de lo importante :
Si tuviera que elegir cuales son las propiedades mas importantes de estos widgets de las cuales hablar seria, mainAxisAligment y crossAxisAligment ambas empiezan definidas como MainAxisAligment.start pero a pesar que sus nombres son iguales no debemos de confundirnos una esta define su main de forma horizontal y su cross de forma vertical (Row) y la otra su main de forma vertical y su cross de forma horizontal (Column), con respecto a los tipos existentes son varios empezando por el default que es start, spaceAround, spaceEvenly, spaceBetween, end y center, intente todos ellos en sus practicas para que conozcan como difieren entre ellos.
Placeholder
Este es importante solo por el hecho de que en ocasiones no sabemos que imagen debe de llevar o que ira exactamente en algún lugar pero sabemos que ese espacio deberá estar reservado para algún uso, su uso es muy básico y no agrega funcionalidad alguna peeeero nos permite ir trabajando con nuestra interfaz en lo que tenemos contenido real, veamos su constructor.
Nos quedan algunos por ver pero los veremos todos juntos y de una vez por todas!
Text, Icon e Image
La utilidad de estos es justamente para lo que dicen para poner Texto, utilizar un icono y poner una imagen, claro todo es mas fácil decirlo de hacerlo así que veamos un poco de código para no aburrirnos.
Text('Texto que se mostrara',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold, fontFamily: 'nombreFuente'),
)Hablemos un poco de esto, primero se pone ente comillas el texto, después lo alineamos al centro y decimos que si llegara a haber un overflow lo resuelva usando la propiedad elipsis y por ultimo le estamos dando estilo solo la hicimos negrita y como bonus y de tarea es el utilizar una fuente que nosotros estemos agregando pueden ver como se usa aquí.
Veamos como utilizar un Icon:
Icon(Icons.favorite, size: 48.0, color: Colors.black)Con esto dibujamos un icono de corazón, de tamaño 48.0 (recuerden debe ser double) y este es de color negro, los iconos que se encuentran ya en Flutter pertenecen a Material Design, pero de igual manera existen otros como los de FontAwesome que están en los Dart Packages este se carga en el pubspec.yml ya hablaremos de este tema en los próximos post.
Veamos como mostrar imágenes en Flutter desde internet es tan complicado como:
Image.network('direccionEnInternet')Existen varios tipos como Image.asset o Image.file pueden verlos con lujo de detalle aquí. Al igual que sus propiedades como width, height, fit, repeat estas son algunas de las mas utilizadas, claro que tenemos otras más, la cual nos agrega otras funcionalidades como es usar un color y colorBlendMode.
RaiseButton
El uso de este es para ejecutar cualquier función, método llamada asíncrona o cualquier actividad que requiera interacción del usuario, en nuestro ejemplo solo haremos un llamado a un bottomSheet algo que ya hemos hecho pero no esta de más recordarlo.
Veamos un poco mas de los widgets básicos pero ahora en código: 😍
Los invito a seguirme en Twitter donde siempre estoy compartiendo información importante y notas acerca de Flutter tanto en Español como en Inglés.
Así como que sigan la comunidad de Flutter en español en Twitter, Facebook y Github, la cual nos ha traído la documentación de Flutter en nuestro idioma, también les dejo el enlace de Telegram donde podrán platicar y pedir apoyo a mas de 200 personas reunidas solo con el fin de apoyar y aprender.
No olviden pasar por mis otros post en Medium, les estaré avisando por todos los medios cada vez que tenga uno nuevo para ustedes.
Si quisieran algún tema en especifico ya saben por donde contactarme o bien, pueden dejar su comentario en este post, todo es bienvenido!
