¿Qué son los widgets en Flutter?

Flutter es el conjunto de herramientas de interfaz de usuario de Google para crear hermosas aplicaciones de iOS y Android compiladas de forma nativa a partir de una única base de código. Para crear cualquier aplicación, comenzamos con widgets: el componente básico de las aplicaciones flutter. Los widgets describen cómo debería verse su vista dada su configuración y estado actuales. Incluye un widget de texto, un widget de fila, un widget de columna, un widget de contenedor 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 la secuencia de los widgets utilizados para crear la aplicación. Y la estructura del código de una aplicación es un árbol de widgets. 

Categoría de Widgets:

Hay principalmente 14 categorías en las que se dividen los widgets flutter. Se segregan principalmente en función de la funcionalidad que brindan en una aplicación flutter.

1. Accesibilidad: estos son el conjunto de widgets que hacen que una aplicación flutter sea más accesible.
2. Animación y movimiento: estos widgets agregan animación a otros widgets.
3. Activos, imágenes e íconos: estos widgets se encargan de activos como mostrar imágenes y mostrar íconos.
4. Asíncrono: proporcionan funcionalidad asíncrona en la aplicación flutter.
5. Conceptos básicos: estos son el paquete de widgets que son absolutamente necesarios para el desarrollo de cualquier aplicación flutter.
6. Cupertino: Estos son los widgets diseñados por ios.
7. Entrada: este conjunto de widgets proporciona funcionalidad de entrada en una aplicación flutter.
8. Modelos de interacción: estos widgets están aquí para administrar eventos táctiles y enrutar a los usuarios a diferentes vistas en la aplicación.
9. Diseño: este paquete de widgets ayuda a colocar los otros widgets en la pantalla según sea necesario.
10. Componentes materiales: este es un conjunto de widgets que siguen principalmente el diseño material de Google.
11. Pintura y efectos: este es el conjunto de widgets que aplican cambios visuales a sus widgets secundarios sin cambiar su diseño o forma.
12. Desplazamiento: Esto proporciona capacidad de desplazamiento a un conjunto de otros widgets que no se pueden desplazar de forma predeterminada.
13. Estilo: se trata del tema, la capacidad de respuesta y el tamaño de la aplicación.
14. Texto: Esto muestra texto.

Tipos de widgets:

En términos generales, hay dos tipos de widgets en el aleteo: 

1. Widget sin estado
2. Widget con estado

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

import 'package:flutter/material.dart';
 
// function to trigger build pricess
void main() => runApp(const GeeksforGeeks());
 
class GeeksforGeeks extends StatelessWidget {
  const GeeksforGeeks({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightGreen,
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: const Text("GeeksforGeeks"),
        ), // AppBar
        body: Container(
          child: const Center(
            child: Text("Hello Geeks!!"),
          ), // Center
        ), // Container
      ), // Scaffold
    ); // MaterialApp
  }
}

 
Ejemplo:  el árbol de diseño de la pantalla de la aplicación básica usando widgets con estado. Esto también produce los mismos resultados que el código anterior.

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightGreen,
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: const Text("GeeksforGeeks"),
        ), // AppBar
        body: const Center(
          child: Text("Hello Geeks!!"),
        ), // Container
      ), // Scaffold
    );// MaterialApp
  }
}

La descripción de los widgets utilizados es la siguiente: 

• Andamio: implementa la estructura de diseño visual del diseño de materiales básicos.
• AppBar: para crear una barra en la parte superior de la pantalla.
• Texto Para escribir cualquier cosa en la pantalla.
• Contenedor: para contener cualquier widget.
• Centro: para proporcionar alineación central a otros widgets.

Producción: