Widgety const

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 15 z 34.

const przed wartością oznacza: jest ona ustalona w momencie pisania kodu i nigdy się nie zmienia. const Text('Score') będzie wyświetlać Score tak długo, jak działa aplikacja.

Po co mówić o tym Dartowi? Gdy setState ponownie buduje ekran, Flutter może pominąć każdy widżet const, ponieważ wie, że nic się w nim nie zmieniło. Dlatego edytory kodu Fluttera, takie jak VS Code i Android Studio, podkreślają widżet, który może być const, i sugerują dodanie tego słowa. Od tej pory aplikacje w tym kursie używają const tam, gdzie ma to zastosowanie.

const działa też wewnątrz: w przypadku widżetu wszystko w jego nawiasach jest również const. Wystarczy więc użyć go raz, przy najbardziej zewnętrznym widżecie, który się nie zmienia:

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

Zmienna może się zmieniać, więc nigdy nie może znajdować się wewnątrz const. Umieść Text('$_score') w tej kolumnie, a Dart odmówi kompilacji, zgłaszając błąd „Not a constant expression”. Rozwiązanie: usuń const z kolumny i dodaj je do każdego elementu potomnego, który się nie zmienia:

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

Wyzwanie

Średni

Wynik zwiększa się po naciśnięciu przycisku plus, ale ekran nigdy go nie wyświetla. Pod Score dodaj Text('$_score') w rozmiarze 48. Trzeba przenieść const z Column do tych umieszczonych w niej widżetów, które się nie zmieniają.

Spróbuj swoich sił

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