Variables final

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 16 sur 34.

final est l’autre mot pour désigner une valeur qui ne change pas. Une variable final reçoit sa valeur une seule fois et ne peut jamais en recevoir une autre :

final int total = _tickets * 12;
total = 50;   // erreur : total est final

La différence avec const concerne le moment où la valeur est connue. Une valeur const est connue lorsque tu écris le code, comme 12. Une valeur final peut être calculée pendant l’exécution de l’application, comme _tickets * 12, qui dépend du nombre de billets disponibles à ce moment-là.

const int price = 12;                // toujours 12
final int total = _tickets * price;  // connu lors de l’exécution de build

Une variable final placée en haut de build est recalculée à chaque build ; ainsi, après setState, elle contient le nouveau total. Utilise final pour une valeur que tu définis une seule fois et que tu lis uniquement, et un simple int ou String pour une valeur que tu modifies, comme _tickets.

Défi

Facile

Un billet coûte 12. Au début de build, ajoute const int price = 12; et une variable final nommée total, qui correspond à _tickets multiplié par price. Affiche-la sous la forme Total: 12 à la place de Total: ?, afin que le résultat soit Total: 24 après l’ajout d’un billet.

Essayez vous-même

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