تأثيرات التمرير المخصصة باستخدام ScrollController

class _ScrollDemoState extends State<ScrollDemo> {
  late final ScrollController _scroll;
  double _offset = 0;

  @override
  void initState() {
    super.initState();
    _scroll = ScrollController();
    // أعد بناء شجرة الودجات في كل مرة تتغير موضع التمرير
    _scroll.addListener(() {
      setState(() {
        _offset = _scroll.offset;
      });
    });
  }

  @override
  void dispose() {
    _scroll.dispose(); // تخلص دائماً لتحرير الموارد
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scroll, // الصق المتحكم
      itemCount: 40,
      itemBuilder: (context, index) => ListTile(
        title: Text('العنصر $index  •  الإزاحة: ${_offset.toStringAsFixed(1)}'),
      ),
    );
  }
}

import 'dart:ui' show lerpDouble;

// داخل build()، بعد معرفة _offset:
const double kCollapseDistance = 200.0;

// progress ينتقل من 0.0 (الأعلى) إلى 1.0 (تمرير 200 بكسل أو أكثر)
final double progress = (_offset / kCollapseDistance).clamp(0.0, 1.0);

// الشفافية: يتلاشى الرأس من 1.0 → 0.0 كلما مرر المستخدم للأسفل
final double headerOpacity = lerpDouble(1.0, 0.0, progress)!;

// الحجم: يتقلص الرأس من 1.0 → 0.85
final double headerScale = lerpDouble(1.0, 0.85, progress)!;

// المنظور المتوازي: تنتقل الخلفية للأعلى بنسبة 40٪ من سرعة التمرير
final double parallaxOffset = _offset * 0.4;

return Stack(
  children: [
    // صورة الخلفية مع منظور متوازي
    Positioned(
      top: -parallaxOffset,
      left: 0, right: 0,
      child: Image.asset('assets/hero.jpg', height: 300, fit: BoxFit.cover),
    ),
    // طبقة العنوان المتلاشية
    Positioned(
      top: 0, left: 0, right: 0,
      child: Opacity(
        opacity: headerOpacity,
        child: Transform.scale(
          scale: headerScale,
          child: const _HeroTitle(),
        ),
      ),
    ),
    // المحتوى الفعلي القابل للتمرير
    ListView.builder(
      controller: _scroll,
      itemCount: 30,
      padding: const EdgeInsets.only(top: 260),
      itemBuilder: (context, i) => ListTile(title: Text('العنصر $i')),
    ),
  ],
);

const double kRevealThreshold = 300.0;
const double kRevealHeight   = 56.0;

// 0.0 = مخفي فوق الشاشة، 1.0 = ظاهر بالكامل
final double revealProgress =
    ((_offset - kRevealThreshold) / kRevealHeight).clamp(0.0, 1.0);

final double revealDy = lerpDouble(-kRevealHeight, 0.0, revealProgress)!;

// داخل Stack:
Positioned(
  top: 0, left: 0, right: 0,
  child: Transform.translate(
    offset: Offset(0, revealDy),
    child: Material(
      elevation: 4,
      child: SizedBox(
        height: kRevealHeight,
        child: Row(
          children: const [
            Icon(Icons.filter_list),
            Text('تصفية وترتيب'),
          ],
        ),
      ),
    ),
  ),
),