Flutter – Widget sin estado

Stateless Widget es algo que no tiene un estado. Para comprender un widget sin estado, debe tener una comprensión clara de los widgets y los estados. Un estado se puede definir como «un cambio imperativo de la interfaz de usuario» y un widget es «una descripción inmutable de la parte de la interfaz de usuario». Para obtener más información sobre ellos, consulte los artículos a continuación.

• ¿Qué son los widgets en Flutter?
• Flutter – Gestión de estado

Según los estados, los widgets se dividen en 2 categorías:

1. Widget sin estado
2. Widget con estado

En este artículo, entenderemos qué son los Stateless Widgets.

¿Qué son los widgets sin estado?

Un widget sin estado es uno que no tiene ningún estado mutable que necesite rastrear. La única área de enfoque de un widget sin estado es la información que se muestra y la interfaz de usuario. Se ocupan de situaciones que son independientes de la entrada del usuario. Un widget sin estado no le dice al marco cuándo eliminarlo o reconstruirlo, recibe un comando del propio marco. Crean interfaces de usuario que no cambian dinámicamente al actualizar los valores cercanos. Usamos un widget sin estado cuando creamos una aplicación que no requiere volver a dibujar un widget una y otra vez. A continuación se muestra la estructura básica de un widget sin estado conocido como GreenFrog.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

La clase MyApp es un StatelessWidget y Widget build es un método con BuildContext como parámetro que devuelve widgets. Cada widget al ingresar a la compilación de Widget (contexto de contexto de compilación) tiene que anularlo para ingresar al árbol de widgets. Algunos ejemplos de un widget sin estado son Text, IconButton, AppBar, etc. El método de compilación se llama dentro de un widget sin estado solo en tres casos:

• Inicialmente en el inicio cuando se construye por primera vez al iniciar la aplicación.
• Si se cambia el widget principal
• Si se cambia el widget heredado

¿Cómo funciona un widget sin estado?

Considere un escenario en el que desea llamar a su amigo usando un teléfono móvil. La interfaz de usuario de su dispositivo móvil seguirá siendo la misma, es decir, no se realizarán cambios hasta que usted mismo no ejecute ningún comando para llamar. En el momento en que haga clic en la pantalla para ver los registros de llamadas recientes, la interfaz de usuario se reconstruirá y abrirá los registros de llamadas, es decir, cambiará su estado. Ahora, mira el código de abajo

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  void know() {
    // ignore: avoid_print
    print("Button Pressed");
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: ElevatedButton(
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.green)),
            onPressed: know,
            child: const Text(
              ' Stateless Widget Tutorial ',
              style: TextStyle(color: Colors.white),
            ),
          ),
          // RaisedButton class is deprecated and should not be used
          // Use ElevatedButton class instead
           
          // child: RaisedButton(
          //     padding: EdgeInsets.all(5),
          //     color: Colors.green,
          //     onPressed: know,
          //     child: const Text(
          //     ' Stateless Widget Tutorial ',
          //     style: TextStyle(color: Colors.white),
          //     ),
          // ),
        ),
      ),
    );
  }
}

El control ingresará a runApp() a través de main. Desde allí será redirigido al widget sin estado de la clase MyApp. El método de compilación se llamará la primera vez que se crea el widget sin estado de MyApp. Cada vez que un widget quiere ingresar al árbol de widgets, tiene que anular el método de creación de Widget (contexto BuildContext). Después de eso, el control va al widget de MaterialApp y se ejecutará el resto del código. Recuerde, cada vez que un nuevo widget ingresa al árbol de widgets, debe anular el método de compilación. 

Producción:

El punto a tener en cuenta en la salida es que el botón elevado se presiona 5 veces y cada vez obtenemos una declaración de impresión en la consola. ¿Qué significa? Significa que el widget sin estado se construye solo una vez al principio, pero el widget se construye 5 veces cada vez que activa el método know().