Widgets const

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 15 de 34.

const antes de um valor significa: ele é fixo quando você escreve o código e nunca muda. const Text('Score') exibirá Score enquanto o app estiver em execução.

Por que dizer isso ao Dart? Quando setState constrói a tela novamente, o Flutter pode ignorar todos os widgets const, porque sabe que nada dentro deles mudou. É por isso que os editores de código do Flutter, como o VS Code e o Android Studio, sublinham um widget que poderia ser const e sugerem adicioná-lo. A partir de agora, os apps deste curso usam const quando apropriado.

const se aplica ao conteúdo interno: em um widget, tudo que está entre parênteses também é const. Então, você o escreve uma vez, no widget mais externo que nunca muda:

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

Uma variável pode mudar, então nunca pode estar dentro de const. Coloque Text('$_score') nessa coluna e o Dart se recusará a compilá-la, com o erro "Not a constant expression". A solução: remova const da coluna e coloque-o em cada filho que não muda:

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

Desafio

Médio

A pontuação aumenta quando você pressiona o botão de adição, mas a tela nunca a exibe. Abaixo de Score, adicione Text('$_score') com tamanho 48. Você precisará mover const de Column para os widgets dentro dela que nunca mudam.

Experimente você mesmo

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