Variabili final

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 16 di 34.

final è l'altra parola per indicare un valore che non cambia. Una variabile final riceve il suo valore una sola volta e non può mai riceverne un altro:

final int total = _tickets * 12;
total = 50;   // errore: total è final

La differenza rispetto a const sta nel momento in cui si conosce il valore. Un valore const è noto quando scrivi il codice, come 12. Un valore final può essere calcolato mentre l'app è in esecuzione, come _tickets * 12, che dipende da quanti biglietti ci sono in quel momento.

const int price = 12;                // sempre 12
final int total = _tickets * price;  // noto quando viene eseguito build

Una variabile final all'inizio di build viene calcolata di nuovo a ogni build, quindi dopo setState contiene il nuovo totale. Usa final per un valore che imposti una sola volta e che leggi soltanto, e un semplice int o String per un valore che modifichi, come _tickets.

Sfida

Facile

Un biglietto costa 12. All'inizio di build, aggiungi const int price = 12; e una variabile final total che corrisponde a _tickets moltiplicato per price. Mostralo come Total: 12 al posto di Total: ?, in modo che dopo un altro biglietto venga visualizzato Total: 24.

Provalo tu

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _tickets = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tickets')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Tickets: $_tickets', style: const TextStyle(fontSize: 24)),
            Text('Total: ?', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _tickets++;
                });
              },
              child: const Text('Add a ticket'),
            ),
          ],
        ),
      ),
    );
  }
}