Aplicacions amb Flutter, Dart i Flame

Pas de paràmetres d'un giny al seu descendent

És força habitual haver de passar paràmetres (variables i funcions) d'un giny al seu descendent; per exemple de la pantalla principal a un giny on es defineix part del contingut. Això és imprescindible quan en el giny pare (per exemple, la pantalla principal) ens calen els valors o bé si aquests són necessaris en un descendent diferent.

Pas de paràmetres a un giny sense estat

En el descendent (posem el cas que s'anomena EntraNum i està en el fitxer entra_num.dart) hem de definir com a variables finals de la classe les variables que hauran de passar; aquestes variables s'hauran d'establir en el constructor de la classe com a paràmetres requerits. El this indica que és una variable de la pròpia classe. En el giny podem fer servir directament aquestes variables.

entra_num.dart

class PantResultat extends StatelessWidget {
  final String valor;
  const EntraNum({super.key, required this.valor});

  @override
  Widget build(BuildContext context) {
    return ...
...
            Text(valor),
...

I a la pantalla principal definim els valors de les variables.

...
class _PantPralState extends State<PantPral> {
  double caigudaTens = 1.6;
  @override
  Widget build(BuildContext context) {
    return ...
...
              EntraNum(valor: caigudaTens.toString),
...

Pas de paràmetres a un giny amb estat

En el descendent (posem el cas que s'anomena EntraNum i està en el fitxer entra_num.dart) hem de definir com a variables finals de la classe les variables i les funcions que hauran de passar; aquestes variables i funcions s'hauran d'establir en el constructor de la classe com a paràmetres requerits. El this indica que és una variable de la pròpia classe.

entra_num.dart

class EntraNum extends StatefulWidget {
  final String valor;
  final Function() incrementar;
  const EntraNum({
    super.key,
    required this.valor,
    required this.incrementar
  });

  @override
  State<EntraNum> createState() => _EntraNumState();
}
...

En el giny podem fer servir aquestes variables i funcions posant-los al davant la paraula widget, per fer referència a que són variables traspassades.

class _EntraNumState extends State<EntraNum> {
  @override
  Widget build(BuildContext context) {
    return ...
...
            Text(widget.valor),
...
                  child: IconButton(
                    onPressed: () {
                      widget.decrementar();
                    },
                    icon: Icon(Icons.remove),
                  ),
...

I a la pantalla principal definim els valors de les variables i les accions de les funcions.

...
class _PantPralState extends State<PantPral> {
  double caigudaTens = 1.6;
  @override
  Widget build(BuildContext context) {
    return ...
...
              EntraNum(
                valor: caigudaTens.toString,
                incrementar: (){setState(() {caigudaTens += 0.1;});},
              ),
...

Els trossos de programa d'aquesta explicació s'han agafat d'aquest apartat que correspon a l'exemple de càlcul de la resistència per a un led.

Pas d'una funció que té paràmetres

Quan la funció que hem de passar té paràmetres, cal indicar-los. Per exemple, en aquest cas la funció té un paràmetre real.

class Cursor extends StatefulWidget {
  final double valor;
  final Function(double) siCanvia;
  const Cursor({super.key, required this.valor, required this.siCanvia});

  @override
  State<Cursor> createState() => _CursorState();
}

class _CursorState extends State<Cursor> {
  @override
  Widget build(BuildContext context) {
    return ...
...
          Slider(
            value: widget.valor,
            onChanged: (valorNou) {
              setState(() {
                widget.siCanvia(valorNou);
              });
            },
...

En l'ascendent (per exemple, a la pantalla principal) caldrà definir una variable per al valor que hem de passar i modificar, el nom que es dona al valor retornat i el comportament de la funció.

...
class _PantPralState extends State<PantPral> {
  double valorR = 0.5;
  @override
  Widget build(BuildContext context) {
    return ...
...
        Cursor(
          valor: valorR,
          siCanvia: (nouValor) {
            setState(() {
              valorR = nouValor;
            });
          },
        ),
...

Els trossos de programa d'aquesta explicació s'han agafat d'aquest apartat que correspon a l'exemple de triar un color.

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.