StatelessWidget در مقابل StatefulWidget

StatelessWidget ویجتی است که هیچ state داخلی قابل تغییری ندارد و خروجی آن فقط به پارامترهای ورودی (props) وابسته است؛ StatefulWidget ویجتی است که یک شیء State مرتبط با خود دارد و می‌تواند در طول زمان (با فراخوانی setState) دوباره رندر شود.

ویژگی	StatelessWidget	StatefulWidget
داشتن State داخلی	خیر	بله (شیء State جداگانه)
Rebuild با setState	غیرممکن/بی‌معنی	ممکن و رایج
کارایی	سبک‌تر	کمی سنگین‌تر (نگه‌داری state)
مثال کاربرد	متن ثابت، آیکون، کارت	فرم، شمارنده، انیمیشن تعاملی

کِی از StatelessWidget استفاده کنیم؟

برای UI ثابت که فقط بر اساس داده‌های ورودی نمایش داده می‌شود و نیازی به تغییر داخلی ندارد (مثل یک آیکون، متن ثابت یا کارت نمایشی)، از StatelessWidget استفاده کنید.

کِی از StatefulWidget استفاده کنیم؟

برای UI ای که باید در پاسخ به تعامل کاربر یا رویدادها (مثل کلیک، انیمیشن، ورودی فرم) خودش را به‌روزرسانی کند، از StatefulWidget استفاده کنید.

مثال StatelessWidget

class GreetingCard extends StatelessWidget {
  final String name;
  const GreetingCard({required this.name});

  @override
  Widget build(BuildContext context) => Text('Hello, $name!');
}

مثال StatefulWidget

class Counter extends StatefulWidget {
  @override
  State<Counter> createState() => _CounterState();
}
class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) => ElevatedButton(
    onPressed: () => setState(() => count++),
    child: Text('Count: $count'),
  );
}

اشتباه رایج

تلاش برای تغییر یک متغیر داخل StatelessWidget و انتظار به‌روزرسانی UI (که هرگز رخ نمی‌دهد چون Flutter دوباره rebuild نمی‌کند) — اگر UI باید تغییر کند، حتماً باید از StatefulWidget و setState (یا یک state management مثل Provider/Riverpod) استفاده شود.

جمع‌بندی

اگر ویجت هیچ‌وقت بعد از ساخت اولیه نیاز به تغییر ندارد → StatelessWidget؛ اگر باید در پاسخ به رویداد یا زمان تغییر کند → StatefulWidget.