const-Widgets

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

const vor einem Wert bedeutet: Dieser Wert ist fest, sobald du den Code schreibst, und ändert sich nie. const Text('Score') zeigt Score an, solange die App läuft.

Warum solltest du Dart das mitteilen? Wenn setState den Bildschirm erneut erstellt, kann Flutter jedes const-Widget überspringen, weil es weiß, dass sich darin nichts geändert hat. Deshalb unterstreichen die Code-Editoren von Flutter, etwa VS Code und Android Studio, ein Widget, das const sein könnte, und schlagen vor, es hinzuzufügen. Ab jetzt verwenden die Apps in diesem Kurs const, wo es passt.

const wirkt sich auch auf den Inhalt aus: Bei einem Widget ist alles in seinen Klammern ebenfalls const. Du schreibst es also einmal, beim äußersten Widget, das sich nie ändert:

const Column(
  children: [
    Text('Score'),
    Icon(Icons.star),
  ],
)

Eine Variable kann sich ändern und daher niemals innerhalb von const stehen. Füge Text('$_score') in diese Spalte ein, und Dart weigert sich, den Code zu kompilieren. Es erscheint der Fehler „Not a constant expression“. Die Lösung: Entferne const von der Spalte und setze es auf jedes untergeordnete Element, das sich nicht ändert:

Column(
  children: [
    const Text('Score'),
    Text('$_score'),
  ],
)

Aufgabe

Mittel

Der Punktestand steigt, wenn du auf die Plus-Schaltfläche drückst, aber auf dem Bildschirm wird er nie angezeigt. Füge unter Score Text('$_score') in der Größe 48 hinzu. Du musst const von der Column zu den Widgets verschieben, die sich darin nicht ändern.

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 _score = 0;

  void _goal() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Game')),
      body: Center(
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.sports_soccer, size: 64),
            Text('Score', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goal,
        child: const Icon(Icons.add),
      ),
    );
  }
}