Widget dùng const

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 15 trên 34.

const đặt trước một giá trị có nghĩa là: giá trị này cố định khi bạn viết code và không bao giờ thay đổi. const Text('Score') sẽ hiển thị Score trong suốt thời gian ứng dụng chạy.

Tại sao cần cho Dart biết điều đó? Khi setState dựng lại màn hình, Flutter có thể bỏ qua mọi widget const, vì biết rằng không có gì bên trong chúng thay đổi. Đó là lý do các trình soạn thảo code cho Flutter, như VS Code và Android Studio, gạch chân widget có thể là const và gợi ý thêm từ khóa này. Từ đây trở đi, các ứng dụng trong khóa học này dùng const ở những chỗ phù hợp.

const áp dụng cả bên trong: với một widget, mọi thứ trong dấu ngoặc đơn của nó cũng là const. Vì vậy, bạn chỉ cần viết từ khóa này một lần, ở widget ngoài cùng không bao giờ thay đổi:

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

Biến có thể thay đổi, vì vậy không bao giờ có thể nằm bên trong const. Nếu đặt Text('$_score') trong cột đó, Dart sẽ từ chối biên dịch và báo lỗi "Not a constant expression". Cách sửa: bỏ const khỏi cột và đặt nó trên từng phần tử con không thay đổi:

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

Thử thách

Trung bình

Điểm số tăng lên khi bạn nhấn nút dấu cộng, nhưng màn hình không hiển thị điểm. Bên dưới Score, hãy thêm Text('$_score') với kích thước 48. Bạn cần chuyển const từ Column sang các widget bên trong không thay đổi.

Tự làm thử

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