اضافة الصعود للاعلى والاسفل اثناء scroll ومعرفة حالة ال scroll
بسم الله الرحمن الرحيم في هذا المقال سوف نشرح معكم كيف تقوم بعمل auto scroll وايضا عمل تغيير لامكانية الصعود سواء للاعلى او للاسفل بناء على حالة المستخدم سواء كان يريد الصعود او النزول للاسفل ايضا سوف تستطيع تحديد الموقع الذي يكون فيه المستخدم والانتقال الى نهايه الصفحه او اولها وعمل مدة زمنيه معينه للانتقال كل هذا سوف نتعرف عليه باذن الله تعالى في هذه المقالة البسيطه والتي نقدمها لكم بشكل حصري على موقعنا جي كودرس ويوجد الكثير من الاكواد والشروحات الموجوده في الموقع والتي تساعدكم بشكل كبير في انجاز الاعمال البرمجية .
How to detect scroll position in Flutter project
ولمعرفة اذا كان السكرول في الاعلى او الاسفل يمكنك عمل اختبار وبناء عليه تستطيع تنفيذ اذا نجحت العمليه ارجع 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),
),
);
}
}