المتغيرات final

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 16 من 34.

final هي الكلمة الأخرى التي تُستخدم لقيمة لا تتغير. تحصل المتغيّرة final على قيمتها مرة واحدة، ولا يمكن إسناد قيمة أخرى إليها أبدًا:

final int total = _tickets * 12;
total = 50;   // خطأ: total مُعرَّف بالكلمة المفتاحية final

يكمن الاختلاف عن const في وقت معرفة القيمة. تكون قيمة const معروفة عند كتابة الشيفرة، مثل 12. أما قيمة final فيمكن حسابها أثناء تشغيل التطبيق، مثل _tickets * 12، إذ تعتمد على عدد التذاكر الموجودة حاليًا.

const int price = 12;                // دائمًا 12
final int total = _tickets * price;  // تُعرف قيمته عند تشغيل build

تُعاد حسابات متغيّرة final الموجودة في أعلى build عند كل عملية بناء، لذا تحمل المجموع الجديد بعد setState. استخدم final لقيمة تسندها مرة واحدة ولا تقرؤها إلا، واستخدم int أو String عاديًا لقيمة تغيّرها، مثل _tickets.

التحدي

سهل

تكلفة التذكرة 12. في أعلى build، أضف const int price = 12; ومتغيرًا من نوع final اسمه total، تكون قيمته _tickets مضروبة في price. اعرضه بالشكل Total: 12 بدلًا من Total: ?، ليظهر بالشكل Total: 24 بعد إضافة تذكرة أخرى.

جرّب بنفسك

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