الحالة (State) والتفاعل

Stateless مقابل Stateful

StatefulWidget مع setState

عند تغيّر البيانات نستدعي setState لإعادة بناء الواجهة:

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('العدّ: $count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: const Text('زيادة'),
        ),
      ],
    );
  }
}

القاعدة الذهبية

⚠️ غيّر قيمة الحالة دائمًا داخل setState، وإلا لن تتحدّث الواجهة.

// ❌ لن تتحدّث الواجهة
count++;

// ✅ صحيح
setState(() {
  count++;
});

حقل إدخال متفاعل

TextField(
  onChanged: (value) {
    setState(() {
      name = value;
    });
  },
)

🎉 أكملت أساسيات Flutter! أصبحت قادرًا على بناء تطبيقات موبايل تفاعلية. اختبر نفسك واحصل على شهادتك.