Flutter StatefulWidget. Conceptos

Introducción

• Hasta ahora hemos usado los StatelessWidget para todo.

Este tipo de Widget:

• No permiten guardar ningún tipo de dato en forma de variable y cuando definimos algo a nivel de clase siempre debe estar asociado al modificador final o const.

No impide compilar la aplicación y aparecerá un Warning en la definición del Widget. Un ejemplo de uso sería cuando tenemos un formulario y queremos guardar lo escrito por el usuario en una variable. Esto no lo podríamos realizar con este tipo de Widget.

• No se pueden 'redibujar' para hacer que reflejen un cambio que pueda darse por programación. Imagináos el caso de que busquéis datos por Internet y se carguen nuevos datos en la lista en la que se base un ListView para visualizar el contenido...

import 'package:flutter/material.dart';

class EjemploStateLess extends StatelessWidget {
  int _valor = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('StateLessWidget'),
        ),
        body: _boton()
    );
  }

  Widget _boton(){
    return Center(child: TextButton(child:Text('Presiona $_valor'),
                                    onPressed: (){
                                        print('pulsado $_valor');
                                        _valor = _valor + 1 ;
                                    },
                                    style: TextButton.styleFrom(backgroundColor: Colors.amber),
                                    )
                  );

  }
}



class EjemploStateful extends StatefulWidget {

  @override
  _EjemploStatefulState createState() => _EjemploStatefulState();
}

class _EjemploStatefulState extends State<EjemploStateful> {
    int _valor = 10;

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text('appbarTitle'),
          ),
          body: _boton()
      );

    }
    Widget _boton(){
      return Center(child: TextButton(child:Text('Presiona valores $_valor'),
        onPressed: (){
          print('pulsado $_valor');
          setState(() {
            _valor++;
          });
        },
        style: TextButton.styleFrom(backgroundColor: Colors.amber),
        )
      );

    }
}

Enlace a la página principal de la UD4

Enlace a la página principal del curso

-- Ángel D. Fernández González -- (2021).