final-Variablen

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 16 von 34.

final ist ein anderes Wort für einen Wert, der sich nicht ändert. Eine final-Variable erhält ihren Wert einmal und kann nie einen anderen bekommen:

final int total = _tickets * 12;
total = 50;   // Fehler: total ist final

Der Unterschied zu const liegt darin, wann der Wert bekannt ist. Ein const-Wert ist bekannt, wenn du den Code schreibst, zum Beispiel 12. Ein final-Wert kann berechnet werden, während die App läuft, zum Beispiel _tickets * 12, was davon abhängt, wie viele Tickets es gerade gibt.

const int price = 12;                // immer 12
final int total = _tickets * price;  // bekannt, wenn build ausgeführt wird

Eine final-Variable am Anfang von build wird bei jedem Build erneut berechnet, sodass sie nach setState den neuen Gesamtwert enthält. Verwende final für einen Wert, den du einmal festlegst und nur ausliest, und ein einfaches int oder String für einen Wert, den du änderst, wie _tickets.

Aufgabe

Einfach

Ein Ticket kostet 12. Füge am Anfang von build const int price = 12; und eine final-Variable total hinzu, die _tickets mal price entspricht. Zeige sie anstelle von Total: ? als Total: 12 an, sodass dort nach einem weiteren Ticket Total: 24 steht.

Probier es selbst

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