Flutter: "Todo es un widget", parte 2

En este artículo vamos a concluir el tema relacionado con los widgets. En Flutter, los widgets se pueden agrupar en varias categorías según sus características:

• Widgets de plataforma
• Widgets de diseño
• Widgets de mantenimiento del estado (lo explicamos en el artículo anterior)
• Widgets básicos

Widgets de plataforma

Hasta el momento (y digo hasta el momento porque Flutter tiene planes de extenderse hacia otras plataformas) Flutter tiene widgets específicos en dependencia de la plataforma si es Android o iOS. En el caso de los widgets específicos de Android están diseñados de acuerdo con las pautas de diseño de material del sistema operativo Android y se denominan widgets de material. Los widgets específicos de iOS están diseñados de acuerdo con las pautas de interfaz de Apple y se denominan widgets de Cupertino.

Ejemplos de widgets de material

• Scaffold
• AppBar
• BottomNavigationBar
• BottomAppBar
• TabBarView
• ListTile
• PopupMenuButton
• ButtonBar
• Box
• AlertDialog
• SimpleDialog

Ejemplos de widgets de cupertino:

• CupertinoPageScaffold
• CupertinoButton
• CupertinoPicker
• CupertinoNavegationBar
• CupertinoTabBar
• CupertinoAlertDialog
• CupertinoDialog

Widgets de diseño

En Flutter, para componer varios widgets en un solo widget, se proporciona una gran cantidad de widgets con la función de diseño. Uno de los casos es cuando deseas centrar un widget secundario que se logra utilizando el widget Center. Algunos de los widgets de diseño más populares son:

• Container: es una caja rectangular que se puede decorar con el widget BoxDecoration, al cual se le puede proporcionar fondo, borde y sombra.
• Center: centra su widget secundario.
• Row: organiza los widgets segundarios en dirección horizontal.
• Column: organiza los widgets secundarios en la dirección vertical.
• Stack: organiza los widgets secundarios uno encima del otro.
• GridView.count(…): Adapta los widgets segundarios en filas y columnas en modo response.

Widgets básicos

Los widgets básicos, son aquellos que pueden ser últimos hijos en una jerarquía de widgets, además que proporcionan una pequeña parte de la interfaz de usuario y están mas relacionados a los elementos que un usuario observa en la aplicación, veamos algunos de estos widgets.

Text

El widget Text se usa para mostrar una cadena. Se le puede proporcionar estilos a través de la propiedad style:

Text(
	'Hola Mundo',
    style: TextStyle(color: Colors.teal, fontSize: 18, fontWeight: FontWeight.bold),
    textAlign: TextAlign.justify
)

Image

El widget de Image se usa para mostrar una imagen en la aplicación, proporciona diferentes constructores para cargar imágenes de múltiples fuentes:

• Image.asset: carga la imagen desde los asset del proyecto (debe registrarse prevamente en el archivo pubspec.yaml)
• Image.file: carga la imagen desde una ruta del sistema
• Image.memory: cargar la imagen desde la memoria
• Image.Network: carga la imagen desde la red

Icon

El widget Icon se usa para mostrar un ícono de una fuente descrita en la clase IconData. Para mostrar el ícono de refrescar de color azul y tamaño 20 podemos utilizar el siguiente código:

Icon(
     Icons.refresh,
    color: Colors.blue,
    size: 24
)

Nota: Flutter porporciona una enorme lista de íconos.

Hasta este punto hemos hablado bastante sobre los widgets, aunque siempre quedan muchos detalles que descubrirás a medidas que desarrolles con esta maravillosa tecnología, no te pierdas la próxima entrega en la que hablaré sobre el lenguaje Dart.