Variables final

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 16 de 34.

final es la otra palabra para un valor que no cambia. Una variable final recibe su valor una vez y nunca se le puede asignar otro:

final int total = _tickets * 12;
total = 50;   // error: total es final

La diferencia con const está en cuándo se conoce el valor. Un valor const se conoce cuando escribes el código, como 12. Un valor final se puede calcular mientras se ejecuta la aplicación, como _tickets * 12, que depende de cuántos boletos haya en ese momento.

const int price = 12;                // siempre 12
final int total = _tickets * price;  // se conoce cuando se ejecuta build

Una variable final al principio de build se vuelve a calcular en cada compilación, así que después de setState contiene el nuevo total. Usa final para un valor que estableces una vez y solo lees, y un int o String simple para uno que cambias, como _tickets.

Desafío

Fácil

Un boleto cuesta 12. Al principio de build, agrega const int price = 12; y una variable final total que sea _tickets multiplicado por price. Muéstralo como Total: 12 en lugar de Total: ?, para que muestre Total: 24 después de un boleto más.

Pruébalo tú mismo

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'),
            ),
          ],
        ),
      ),
    );
  }
}