Variabel final

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 16 dari 34.

final adalah kata lain untuk nilai yang tidak berubah. Variabel final mendapatkan nilainya satu kali dan tidak bisa diberi nilai lain:

final int total = _tickets * 12;
total = 50;   // error: total bersifat final

Perbedaan dengan const terletak pada kapan nilainya diketahui. Nilai const diketahui saat kamu menulis kode, seperti 12. Nilai final bisa dihitung saat aplikasi berjalan, seperti _tickets * 12, yang bergantung pada jumlah tiket saat ini.

const int price = 12;                // selalu 12
final int total = _tickets * price;  // diketahui saat build dijalankan

Variabel final di bagian atas build dihitung ulang pada setiap build, jadi setelah setState, nilainya menjadi total yang baru. Gunakan final untuk nilai yang kamu tetapkan satu kali dan hanya dibaca, dan int atau String biasa untuk nilai yang kamu ubah, seperti _tickets.

Tantangan

Mudah

Harga satu tiket adalah 12. Di bagian atas build, tambahkan const int price = 12; dan variabel final bernama total yang merupakan hasil perkalian _tickets dengan price. Tampilkan sebagai Total: 12 sebagai pengganti Total: ?, sehingga tertulis Total: 24 setelah satu tiket ditambahkan.

Coba sendiri

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