Biến dùng final

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 16 trên 34.

final là từ khác để chỉ một giá trị không thay đổi. Biến final nhận giá trị một lần và không bao giờ được gán giá trị khác:

final int total = _tickets * 12;
total = 50;   // lỗi: total đã được khai báo final

Điểm khác biệt so với const là thời điểm bạn biết giá trị. Bạn biết giá trị const ngay khi viết code, chẳng hạn như 12. Bạn có thể tính giá trị final khi ứng dụng chạy, chẳng hạn như _tickets * 12, giá trị này phụ thuộc vào số vé hiện có.

const int price = 12;                // luôn là 12
final int total = _tickets * price;  // đã biết khi hàm build chạy

Biến final ở đầu build được tính lại mỗi lần build, nên sau khi gọi setState, biến sẽ giữ tổng mới. Dùng final cho giá trị bạn đặt một lần và chỉ đọc, còn dùng int hoặc String thông thường cho giá trị bạn thay đổi, như _tickets.

Thử thách

Dễ

Một vé có giá 12. Ở đầu build, hãy thêm const int price = 12; và một biến final tên total, có giá trị bằng _tickets nhân với price. Hiển thị giá trị này dưới dạng Total: 12 thay cho Total: ?, để sau khi thêm một vé nữa, nội dung hiển thị là Total: 24.

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 _tickets = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tickets')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Tickets: $_tickets', style: const TextStyle(fontSize: 24)),
            Text('Total: ?', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _tickets++;
                });
              },
              child: const Text('Add a ticket'),
            ),
          ],
        ),
      ),
    );
  }
}