Diferencia entre widget sin estado y con estado en Flutter

Como todos sabemos, la aplicación flutter consta solo de widgets, estos se clasifican en términos generales en dos tipos: 

  1. Widget sin estado
  2. Widget con estado

Estado:

Antes de conocer la diferencia entre el widget sin estado y con estado debemos echar un vistazo a la definición de Estado de un widget.

El estado es información que puede leerse sincrónicamente cuando se crea el widget y puede cambiar durante la vida útil del widget.

En palabras más simples, el estado del widget es la información de los objetos que sus propiedades (parámetros) contienen en el momento de su creación (cuando el widget se pinta en la pantalla). El estado también puede cambiar cuando se usa, por ejemplo, el color del widget RaisedButton puede cambiar cuando se presiona.

Widget sin estado:

 Los widgets sin estado son los widgets que no cambian, es decir, son inmutables. Su apariencia y propiedades permanecen sin cambios a lo largo de la vida útil del widget. En palabras simples, los widgets sin estado no pueden cambiar su estado durante el tiempo de ejecución de la aplicación, lo que significa que los widgets no se pueden volver a dibujar mientras la aplicación está en acción. 
Ejemplos: Icon, IconButton y Text son ejemplos de widgets sin estado. 
Para crear un widget sin estado, debemos anular el método build() tal como se implementa en el código a continuación. 
 

Dart

import 'package:flutter/material.dart'
void main() = > runApp(GeeksforGeeks())
 
 
class GeeksforGeeks extends StatelessWidget {
    @override Widget build(BuildContext context)
    {return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.grey,
            appBar: AppBar(backgroundColor: Colors.green,
                           title: Text("GeeksforGeeks"), ),
            body: Container(child: Center(child: Text("Stateless Widget"),
                                          ),
                            ),
        ),
    )
    }}

Producción : 
 

Widget con estado: 

Los Stateful Widgets son los que cambian sus propiedades durante el tiempo de ejecución. Son dinámicos, es decir, son mutables y se pueden dibujar varias veces durante su vida útil. Puede cambiar su apariencia en respuesta a eventos desenstringdos por interacciones del usuario o cuando recibe datos. 
Ejemplos: Checkbox, Radio Button, Slider , InkWell , Form y TextField son ejemplos de widgets con estado. 
Para crear un widget con estado, debemos anular el método createState(), que devuelve el estado del widget. 
 

Dart

import 'package:flutter/material.dart'
void main() = > runApp(MyApp())
 
 
class MyApp extends StatelessWidget {
  @override Widget build(BuildContext context)
  {return MaterialApp(theme: ThemeData(
    primarySwatch: Colors.green, ),
                      home: MyHomePage(title: 'GeeksforGeeks'),
                     )}}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}): super(key: key)

Producción : 
 

Diferencias entre el widget sin estado y con estado: 

Widget sin estado:

  • Los widgets sin estado son widgets estáticos.
  • No dependen de ningún cambio de datos ni de ningún cambio de comportamiento.
  • Los widgets sin estado no tienen un estado, se procesarán una vez y no se actualizarán solos, pero solo se actualizarán cuando cambien los datos externos.
  • Por ejemplo: Text, Icon, RaisedButton son widgets sin estado. 
     

Widget con estado:

  • Los widgets con estado son widgets dinámicos.
  • Se pueden actualizar durante el tiempo de ejecución según la acción del usuario o el cambio de datos.
  • Los widgets con estado tienen un estado interno y pueden volver a procesarse si los datos de entrada cambian o si cambia el estado del widget.
  • Por ejemplo: la casilla de verificación, el botón de radio, el control deslizante son widgets con estado

Publicación traducida automáticamente

Artículo escrito por vishu2908 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *