Flutter – Widget con estado

Un widget con estado tiene estados en él. Para comprender un widget con estado, debe tener una comprensión clara de los widgets y la gestión del estado. 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, lo guiaremos a través de los Stateful Widgets. 

¿Qué son los widgets con estado?

Un widget con estado tiene su propio estado mutable que necesita rastrear. Se modifica de acuerdo con la entrada del usuario. Un widget con estado se ocupa principalmente de dos cosas, el estado modificado en función de su estado anterior y una vista actualizada de la interfaz de usuario. Se debe observar un seguimiento del valor de estado anterior porque es necesario reconstruir el widget para mostrar los nuevos cambios realizados en su aplicación. Un widget con estado activa un método de compilación para crear sus widgets secundarios y la subclase del estado contiene los datos relacionados. A menudo se usa en los casos en que se necesita volver a dibujar un widget. Un widget con estado puede cambiar cuando:

1. Hay una entrada de usuario incluida
2. Hay alguna interacción del usuario
3. Hay algunos cambios dinámicos

A continuación se muestra la estructura básica de un widget con estado:

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

MyApp es una clase que amplía Stateful Widget. Un método genérico createState() crea un estado mutable para el widget en una ubicación particular y devuelve otra clase que se extiende por el estado anterior. La clase _MyAppState extiende otro estado. 

Métodos especiales asociados con el widget con estado

Hay varios métodos proporcionados por la clase Stateful para trabajar con ellos:

1. BuildContext : proporciona información sobre qué widget se va a construir/reconstruir y dónde se ubicará después de la reconstrucción. Por lo tanto, BuildContext es el widget asociado con el estado. 

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

2. SetState() : se utiliza un objeto State para modificar la interfaz de usuario. Ejecuta el código para una devolución de llamada en particular y vuelve a pintar los widgets que dependen de ese estado para la configuración. 

setState(setState(() {
  
});

3. initState() : este método es el punto de entrada de un widget. El método initState() inicializa todos los métodos de los que dependerá el método de construcción. Esto se llama solo una vez en la vida útil de un widget y en su mayoría se anula el resto del tiempo. 

initState() {
    //...
    super.init();
}

4. didChangeDependencies() : Se usa para cargar las dependencias requeridas para la ejecución de un estado. Se llama a didChangeDependencies() inmediatamente después de llamar a initState() por primera vez y antes de activar el método de compilación.

void didChangeDependencies() {

 }

5. dispose() : este método se utiliza para eliminar un objeto de forma permanente del árbol de widgets. Se usa cuando necesitamos limpiar la memoria invocando super.dispose().

void dispose(){
    //...
    super.dispose();
}

A continuación se muestra un ejemplo de Stateful Widget.

Ejemplo

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);
 
  @override
  State<MyApp> createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}
 
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: RaisedButton(
        color: Colors.green,
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: const Text(
          'Move to next screen',
          style: TextStyle(color: Colors.white),
        ),
      )),
    );
  }
}
 
class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);
 
  @override
  State<NewScreen> createState() => _NewScreenState();
}
 
class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();
 
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks '),
        backgroundColor: Colors.green,
      ),
      body: Container(
          child: Center(
        child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Container(
              child: Text(
                'User Interface Changed!!',
              ),
            )),
      )),
    );
  }
}

Producción:

En el ejemplo dado, la interfaz de usuario cambia y el control cambia a la siguiente pantalla tan pronto como se hace clic en el botón central, es decir, se cambia el estado del objeto. Esto es exactamente para lo que se usa un widget con estado.