Flutter - Introducción a los widgets

Como aprendimos en el capítulo anterior, los widgets lo son todo en el marco de Flutter. Ya hemos aprendido a crear nuevos widgets en capítulos anteriores.

En este capítulo, entendamos el concepto real detrás de la creación de los widgets y los diferentes tipos de widgets disponibles en el marco de Flutter .

Revisemos el widget MyHomePage de la aplicación Hello World . El código para este propósito es el que se indica a continuación:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

Aquí, hemos creado un nuevo widget ampliando StatelessWidget .

Tenga en cuenta que StatelessWidget solo requiere que se implemente una única compilación de método en su clase derivada. El método de construcción obtiene el entorno de contexto necesario para construir los widgets a través del parámetro BuildContext y devuelve el widget que construye.

En el código, hemos usado title como uno de los argumentos del constructor y también usamos Key como otro argumento. El título se usa para mostrar el título y la clave se usa para identificar el widget en el entorno de construcción.

Aquí, el método de construcción llama al método de construcción de Scaffold , que a su vez llama al método de construcción de AppBar y Center para construir su interfaz de usuario.

Finalmente, el método de construcción Center llama al método de construcción Text .

Para una mejor comprensión, a continuación se da la representación visual del mismo:

Visualización de compilación de widgets

En Flutter , los widgets se pueden agrupar en varias categorías según sus características, como se enumeran a continuación:

• Widgets específicos de la plataforma
• Diseño de widgets
• Widgets de mantenimiento de estado
• Widgets básicos / independientes de la plataforma

Analicemos cada uno de ellos en detalle ahora.

Widgets específicos de la plataforma

Flutter tiene widgets específicos para una plataforma en particular: Android o iOS.

Los widgets específicos de Android están diseñados de acuerdo con las pautas de diseño de materiales del sistema operativo Android. Los widgets específicos de Android se denominan widgets de material .

Los widgets específicos de iOS están diseñados de acuerdo con las pautas de interfaz humana de Apple y se denominan widgets de Cupertino .

Algunos de los widgets de material más utilizados son los siguientes:

• Scaffold
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• RaisedButton
• FloatingActionButton
• FlatButton
• IconButton
• DropdownButton
• PopupMenuButton
• ButtonBar
• TextField
• Checkbox
• Radio
• Switch
• Slider
• Selectores de fecha y hora
• SimpleDialog
• AlertDialog

Algunos de los widgets de Cupertino más utilizados son los siguientes:

• CupertinoButton
• CupertinoPicker
• CupertinoDatePicker
• CupertinoTimerPicker
• CupertinoNavigationBar
• CupertinoTabBar
• CupertinoTabScaffold
• CupertinoTabView
• CupertinoTextField
• CupertinoDialog
• CupertinoDialogAction
• CupertinoFullscreenDialogTransition
• CupertinoPageScaffold
• CupertinoPageTransition
• CupertinoActionSheet
• CupertinoActivityIndicator
• CupertinoAlertDialog
• CupertinoPopupSurface
• CupertinoSlider

Diseño de widgets

En Flutter, se puede crear un widget componiendo uno o más widgets. Para componer varios widgets en un solo widget, Flutter proporciona una gran cantidad de widgets con función de diseño. Por ejemplo, el widget secundario se puede centrar mediante el widget Center .

Algunos de los widgets de diseño más populares son los siguientes:

• Container- Una caja rectangular decorada con widgets BoxDecoration con fondo, borde y sombra.

• Center - Centra su widget hijo.

• Row - Organizar a sus hijos en dirección horizontal.

• Column - Organizar a sus hijos en dirección vertical.

• Stack - Colocar uno encima del otro.

Verificaremos los widgets de diseño en detalle en el próximo capítulo Introducción a los widgets de diseño .

Widgets de mantenimiento de estado

En Flutter, todos los widgets se derivan de StatelessWidget o StatefulWidget .

El widget derivado de StatelessWidget no tiene información de estado, pero puede contener un widget derivado de StatefulWidget . La naturaleza dinámica de la aplicación es a través del comportamiento interactivo de los widgets y el estado cambia durante la interacción. Por ejemplo, al tocar un botón de contador aumentará / disminuirá el estado interno del contador en uno y la naturaleza reactiva del widget Flutter volverá a renderizar automáticamente el widget utilizando nueva información de estado.

Aprenderemos el concepto de widgets StatefulWidget en detalle en el próximo capítulo de administración de estado .

Widgets básicos / independientes de la plataforma

Flutter proporciona una gran cantidad de widgets básicos para crear una interfaz de usuario simple y compleja de manera independiente de la plataforma. Veamos algunos de los widgets básicos de este capítulo.

Text

El widget de texto se utiliza para mostrar un trozo de cuerda. El estilo de la cadena se puede establecer mediante la propiedad de estilo y la clase TextStyle . El código de muestra para este propósito es el siguiente:

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

El widget de texto tiene un constructor especial, Text.rich , que acepta al hijo de tipo TextSpan para especificar la cadena con un estilo diferente. El widget TextSpan es de naturaleza recursiva y acepta TextSpan como sus hijos. El código de muestra para este propósito es el siguiente:

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Las propiedades más importantes del widget de texto son las siguientes:

• maxLines, int - Número máximo de líneas para mostrar

• overflow, TextOverFlow- Especifique cómo se maneja el desbordamiento visual usando la clase TextOverFlow

• style, TextStyle- Especifique el estilo de la cadena usando la clase TextStyle

• textAlign, TextAlign- Alineación del texto como derecha, izquierda, justificar, etc., usando la clase TextAlign

• textDirection, TextDirection - Dirección del texto a fluir, ya sea de izquierda a derecha o de derecha a izquierda

Image

El widget de imagen se utiliza para mostrar una imagen en la aplicación. El widget de imagen proporciona diferentes constructores para cargar imágenes de múltiples fuentes y son los siguientes:

• Image- Cargador de imágenes genérico usando ImageProvider

• Image.asset - Cargar imagen de los activos del proyecto flutter

• Image.file - Cargar imagen de la carpeta del sistema

• Image.memory - Cargar imagen de la memoria

• Image.Network - Cargar imagen de la red

La opción más fácil para cargar y mostrar una imagen en Flutter es incluir la imagen como activos de la aplicación y cargarla en el widget a pedido.

• Cree una carpeta, activos en la carpeta del proyecto y coloque las imágenes necesarias.

• Especifique los activos en pubspec.yaml como se muestra a continuación:

flutter: 
   assets: 
      - assets/smiley.png

• Ahora, cargue y muestre la imagen en la aplicación.

Image.asset('assets/smiley.png')

• El código fuente completo del widget MyHomePage de la aplicación hello world y el resultado se muestra a continuación -.

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

La imagen cargada es como se muestra a continuación:

Las propiedades más importantes del widget de imagen son las siguientes:

• image, ImageProvider - Imagen real para cargar

• width, double - Ancho de la imagen

• height, double - Alto de la imagen

• alignment, AlignmentGeometry - Cómo alinear la imagen dentro de sus límites

Icon

El widget de icono se utiliza para mostrar un glifo de una fuente descrita en la clase IconData . El código para cargar un icono de correo electrónico simple es el siguiente:

Icon(Icons.email)

El código fuente completo para aplicarlo en la aplicación hello world es el siguiente:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

El icono cargado es como se muestra a continuación: