Widget const

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

const davanti a un valore significa: è fisso quando scrivi il codice e non cambia mai. const Text('Score') mostrerà Score per tutta la durata dell'app.

Perché dirlo a Dart? Quando setState ricostruisce lo schermo, Flutter può saltare ogni widget const, perché sa che al suo interno non è cambiato nulla. Ecco perché gli editor di codice di Flutter, come VS Code e Android Studio, sottolineano un widget che potrebbe essere const e suggeriscono di aggiungerlo. Da questo momento in poi, le app di questo corso usano const quando è appropriato.

const si propaga verso l'interno: in un widget, anche tutto ciò che si trova tra le parentesi è const. Quindi lo scrivi una sola volta, sul widget più esterno che non cambia mai:

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

Una variabile può cambiare, quindi non può mai trovarsi all'interno di const. Inserisci Text('$_score') in quella colonna e Dart si rifiuta di compilarla, mostrando l'errore "Not a constant expression". La soluzione: rimuovi const dalla colonna e aggiungilo a ogni elemento figlio che non cambia:

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

Sfida

Medio

Il punteggio aumenta quando premi il pulsante più, ma la schermata non lo mostra mai. Sotto Score, aggiungi Text('$_score') con dimensione 48. Dovrai spostare const da Column ai widget al suo interno che non cambiano mai.

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