¿Qué son los Widgets en Flutter?

por
Qué son los Widgets en Flutter
Qué son los Widgets en Flutter

Tabla de contenidos

Flutter en sí es el conjunto de herramientas de interfaz de usuario de Google para crear hermosas aplicaciones iOS y Android compiladas de forma nativa a partir de una única base de código. Para construir cualquier aplicación, comenzamos con widgets: el componente básico de las aplicaciones de flutter. Los widgets describen cómo debería verse su vista dada su configuración y estado actual. Incluye un widget de texto(text), un widget de fila(row), un widget de columna(column), un widget de contenedor(container) y muchos más. 

Widgets: cada elemento en una pantalla de la aplicación Flutter es un widget. La vista de la pantalla depende completamente de la elección y secuencia de los widgets usados ​​para construir la aplicación. Y la estructura del código de una aplicación es un árbol de widgets. 

Características de los Widgets en Flutter

Categoría de widgets: hay principalmente 14 categorías en las que se dividen los widgets. Se segregan principalmente sobre la base de la funcionalidad que proporcionan en una aplicación de flutter.

  1. Accessibility: este es el conjunto de widgets que hacen que una aplicación Flutter sea más accesible.
  2. Animation and Motion: estos widgets agregan animación a otros widgets.
  3. Assets, Images, and Icons: estos widgets se encargan de activos como mostrar imágenes e iconos.
  4. Async: estos proporcionan funcionalidad async en la aplicación Flutter.
  5. Basics: este es el conjunto de widgets que son absolutamente necesarios para el desarrollo de cualquier aplicación de flutter.
  6. Cupertino: Estos son los widgets diseñados por ios.
  7. Input: este conjunto de widgets proporciona funcionalidad de entrada en una aplicación Flutter.
  8. Interaction Models: estos widgets están aquí para administrar eventos táctiles y enrutar a los usuarios a diferentes vistas en la aplicación.
  9.  Layout: este paquete de widgets ayuda a colocar los otros widgets en la pantalla según sea necesario.
  10. Material Components: este es un conjunto de widgets que siguen principalmente el diseño de materiales de Google.
  11. Painting and effects: este es el conjunto de widgets que aplican cambios visuales a sus widgets secundarios sin cambiar su diseño o forma.
  12. Scrolling: esto proporciona sacrificabilidad de un conjunto de otros widgets que no son desplazables por defecto.
  13. Styling: se ocupa del tema, la capacidad de respuesta y el tamaño de la aplicación.
  14. Text: este texto de visualización.

Tipos de widgets: hay dos tipos de widgets en Flutter: 

  1. Widget sin estado
  2. Widget con estado

Ejemplos y aplicaciones en código

Ejemplo: el árbol de diseño de la pantalla de la aplicación básica: 

import 'package:flutter/material.dart';

void main() => runApp(FirstTest());

class FirstTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
	return MaterialApp(home: Scaffold(backgroundColor: Colors.lightGreen,
									appBar: AppBar(backgroundColor: Colors.green,
									title: Text("BigCode"),),
										
body: Container(child: Center(child: Text("Hello!!"),),),),);}}

Descripción de los widgets utilizados:

  • Scaffold: implementa la estructura de disposición visual básica del diseño de materiales.
  • AppBar: para crear una barra en la parte superior de la pantalla.
  • Text: para escribir cualquier cosa en la pantalla.
  • Container: para contener cualquier widget.
  • Center: para proporcionar una alineación central a otros widgets.

Fuente del artículo, página What is widgets in Flutter