تخطَّ إلى المحتوى

📱 شرح Flutter

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

الدرس 5 من 32· ⏱ 1 دقائق قراءة· 🗓 آخر تحديث: ٢٨ يونيو ٢٠٢٦

Stateless مقابل Stateful

النوعالاستخدام
StatelessWidgetمحتوى ثابت لا يتغيّر
StatefulWidgetمحتوى يتغيّر (عدّاد، نموذج، تبديل)

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

🎯 التالي: التثبيت والإعداد بالتفصيل.

شرح الحالة (State) والتفاعل — Flutter بالعربي
الحالة (State) والتفاعلFlutter بالعربي · The Code Fix

📚 لمزيد من التعمّق في Flutter، راجِع التوثيق الرسمي لـ Flutter.

هل كان هذا الدرس مفيدًا؟