Виджеты с const

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 15 из 34.

const перед значением означает: оно фиксировано при написании кода и никогда не меняется. const Text('Score') будет отображать Score всё время, пока работает приложение.

Зачем говорить об этом Dart? Когда setState заново строит экран, Flutter может пропустить каждый виджет const, потому что знает, что внутри него ничего не изменилось. Поэтому редакторы кода для Flutter, такие как VS Code и Android Studio, подчёркивают виджет, который может быть const, и предлагают добавить это ключевое слово. С этого момента в приложениях этого курса используется const там, где это уместно.

const распространяется внутрь: для виджета всё в его скобках тоже является const. Поэтому достаточно написать это один раз — для самого внешнего виджета, который никогда не меняется:

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

Переменная может меняться, поэтому она никогда не может находиться внутри const. Добавьте Text('$_score') в эту колонку, и Dart откажется компилировать код с ошибкой "Not a constant expression". Исправление: уберите const с колонки и добавьте его к каждому дочернему элементу, который не меняется:

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

Задание

Средне

Счёт увеличивается, когда ты нажимаешь кнопку с плюсом, но на экране это никак не отображается. Под Score добавь Text('$_score') размером 48. Тебе нужно перенести const из Column в те виджеты внутри неё, которые никогда не меняются.

Попробуйте сами

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