🔹آشنایی با SingleChildScrollView در Flutter

✨ چیه اصلاً؟

همونطور که از اسمش معلومه، ویجتیه که به یک فرزند (child) اجازه میده همراه با امکان اسکرول شدن داخل صفحه بشه.یعنی اگه محتوای صفحه از اندازه‌ی نمایشگر بیشتر بشه و جا نشه، کاربر بتونه صفحه رو بالا پایین (یا چپ راست) کنه.
📌 ساختار کلی:

SingleChildScrollView(
  child: Column(
    children: [
      Text("آیتم ۱"),
      Text("آیتم ۲"),
      Text("آیتم ۳"),
      // ... و همینطوری ادامه بده
    ],
  ),
)

نکته: معمولاً داخل SingleChildScrollView باید ویجت‌هایی بذاری که بتونن محتوای زیادی تولید کنن (مثل Column).

🔹 چرا لازم داریم؟

یه موقع هست UI پر از ویجت میشه (فرم‌های طولانی، لیست، عکس‌ها ...). بدون اسکرول، وقتی صفحه پر شد: خطای Overflow (زرد/قرمز توی Flutter) می‌گیری.
پس SingleChildScrollView میاد این مشکل رو حل می‌کنه ---> میگه خب حالا اجازه بده صفحه اسکرول شه.

⚙️ پراپرتی‌های مهم:

1- scrollDirection:

SingleChildScrollView(
  scrollDirection: Axis.horizontal, // پیش‌فرض عمودی هست
  child: Row(
    children: [
      Container(width: 200, height: 100, color: Colors.red),
      Container(width: 200, height: 100, color: Colors.green),
      Container(width: 200, height: 100, color: Colors.blue),
    ],
  ),
)

2- reverse:

جهت اسکرول رو برعکس می‌کنه (پایین به بالا یا راست به چپ).

3- padding:

فاصله داخلی برای محتوا اعمال می‌کنه.

4- physics:

نوع رفتار اسکرول رو تعیین می‌کنه. مثلا:

BouncingScrollPhysics (مثل iOS کشسان) -- ClampingScrollPhysics(مثل اندروید خشک)

🚀 مثال کامل فرم اسکرول‌شونده:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyFormPage(),
    );
  }
}

class MyFormPage extends StatelessWidget {
  const MyFormPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("مثال SingleChildScrollView")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: List.generate(
            20,
            (index) => Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                decoration: InputDecoration(
                  border: const OutlineInputBorder(),
                  labelText: "فیلد ${index + 1}",
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

📊 نتیجه:

• صفحه یک فرم با ۲۰ تکست‌فیلد داره

• بدون SingleChildScrollView → خطای Overflow ⚠

• با SingleChildScrollView → صفحه اسکرول‌پذیر میشه، همه فیلدها نمایش داده میشن.

✨ نکته‌ی مهم:

• SingleChildScrollView برای محتوای محدود خوبه

• اما اگه قراره لیست خیلی طولانی (مثلا ۱۰۰۰ آیتم) داشته باشی، باید از ListView استفاده کنی، چون SingleChildScrollView همه ویجت‌ها رو یکجا می‌سازه (مموری زیاد مصرف می‌کنه).