Widgets const

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

const delante de un valor significa: esto queda fijado cuando escribes el código y nunca cambia. const Text('Score') mostrará Score mientras la aplicación esté en ejecución.

¿Por qué decirle eso a Dart? Cuando setState vuelve a construir la pantalla, Flutter puede omitir todos los widgets const, porque sabe que nada de lo que contienen ha cambiado. Por eso, los editores de código de Flutter, como VS Code y Android Studio, subrayan los widgets que podrían ser const y sugieren añadirlo. A partir de aquí, las aplicaciones de este curso usan const cuando corresponde.

const se aplica a lo que contiene: en un widget, todo lo que está entre paréntesis también es const. Así que lo escribes una sola vez, en el widget más externo que nunca cambia:

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

Una variable puede cambiar, así que nunca puede estar dentro de const. Si pones Text('$_score') en esa columna, Dart se niega a compilarlo y muestra el error "Not a constant expression". La solución: quita const de la columna y ponlo en cada elemento secundario que no cambie:

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

Desafío

Intermedio

La puntuación aumenta cuando presionas el botón de suma, pero la pantalla nunca la muestra. Debajo de Score, agrega Text('$_score') con tamaño 48. Tendrás que mover const de Column a los widgets que contiene y que nunca cambian.

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