اضافة الصعود للاعلى والاسفل اثناء scroll ومعرفة حالة ال scroll

اضافة الصعود للاعلى والاسفل اثناء scroll ومعرفة حالة ال scroll

بسم الله الرحمن الرحيم في هذا المقال سوف نشرح معكم كيف تقوم بعمل auto scroll وايضا عمل تغيير لامكانية الصعود سواء للاعلى او للاسفل بناء على حالة المستخدم سواء كان يريد الصعود او النزول للاسفل ايضا سوف تستطيع تحديد الموقع الذي يكون فيه المستخدم والانتقال الى نهايه الصفحه او اولها وعمل مدة زمنيه معينه للانتقال كل هذا سوف نتعرف عليه باذن الله تعالى في هذه المقالة البسيطه والتي نقدمها لكم بشكل حصري على موقعنا جي كودرس ويوجد الكثير من الاكواد والشروحات الموجوده في الموقع والتي تساعدكم بشكل كبير في انجاز الاعمال البرمجية .

How to detect scroll position in Flutter project

في البداية تحتاج الى عمل controller وفي داخل ال inistate تقوم بعمل controller.position.isScrollingNotifier.addListener وهذا يساعدك في التعرف على حالة ال scroll ومعرفة موقع الscroll وهنا قمنا بعمل اختبار اذا كان وصل للنهايه نقوم بطباعة end واذا كان وصل للاعلى نقوم بطباعة start وعندما يقوم المستخدم بالنزول او عدم النزول يمكنك تنفيذ امر معين .

ولمعرفة اذا كان السكرول في الاعلى او الاسفل يمكنك عمل اختبار وبناء عليه تستطيع تنفيذ اذا نجحت العمليه ارجع false او العكس وبناء على الاجابة قمنا بتغيير وظيفة وشكل المؤشر الذي يظهر في الصورة والذي له علاقه بالصعود او النزول للاسفل .

scroll.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class MyMobileBody extends StatefulWidget {
  const MyMobileBody({Key? key}) : super(key: key);

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {
  ScrollController controller = ScrollController();
  bool _isScrollingDown = false;
  List<int> text = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20
  ];

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      controller.position.isScrollingNotifier.addListener(() {
        if (controller.position.maxScrollExtent == controller.offset) {
          print('end');
        }

        if (controller.position.minScrollExtent == controller.offset) {
          print('start');
        }

        if (!controller.position.isScrollingNotifier.value) {
          print('scroll is stopped');
        } else {
          print('scroll is started');
        }
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          NotificationListener<UserScrollNotification>(
            onNotification: (notification) {
              final ScrollDirection direction = notification.direction;
              setState(() {
                if (direction == ScrollDirection.reverse) {
                _isScrollingDown = false;
                } else if (direction == ScrollDirection.forward) {
                  _isScrollingDown = true;
                }
              });
              return true;
            },
            child: Expanded(
              child: ListView.separated(
                separatorBuilder: (context, index) => SizedBox(height: 10,),
                controller: controller,
                itemCount: text.length,
                itemBuilder: (context, index) {
                  return Container(
                    height: 100,
                    color: Colors.red,
                    child: Center(
                      child: Text(index.toString()),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_isScrollingDown) {

            controller.animateTo(
              controller.position.minScrollExtent,
              duration: Duration(seconds: 2),
              curve: Curves.easeIn,
            );

          } else {
            controller.animateTo(
              controller.position.maxScrollExtent,
              duration: Duration(seconds: 2),
              curve: Curves.easeIn,
            );
          }
        },
        child: Icon(_isScrollingDown ? Icons.arrow_upward : Icons.arrow_downward),
      ),
    );
  }
}