انشاء bottomSheet متغير الحجم مع امكانية اظهار appbar عند رفعه للاعلى في Flutter
bottomSheet واحد من العناصر التي تستخدم في تطوير التطبيقات بشكل قوي وضروري ولكن هناك منكم لا يعرف عن الDraggableScrollableSheet وهو نفس وظيفة عمل ال bottomSheet ولكن الفرق بينهم ان DraggableScrollableSheet قابل للرفع ويمكنه الوصول الى اقصى الشاشه من الاعلى كما نلاحظ في بعض التطبيقات وفي هذه المقاله سوف نشرح معكم ايضا كيف تقوم باستخدامه واظهار الشريط العلوي اذا تم رفع ال DraggableScrollableSheet الى الاعلى كما هو موضح بالصورة وايضا تستطيع اخفاءه واظهاره كما تريد عن طريق الزر الموجود بمنتصف الشاشه .
ماهو bottomSheet وما الفائده من استخدامه في التطبيقات ؟
في سياق تطبيقات الهاتف المحمول، يعد BottomSheet عنصرًا واجهة مستخدم يعرض جزءًا من المحتوى من أسفل الشاشة. غالبًا ما يستخدم BottomSheet لعرض معلومات إضافية أو خيارات أو لعرض حوار.
يمكن أن يكون BottomSheet ثابتًا أو قابلًا للانزلاق. يكون BottomSheet الثابت مرئيًا دائمًا في الجزء السفلي من الشاشة، بينما يظهر BottomSheet القابل للانزلاق من أسفل الشاشة ويمكن للمستخدمين تحريكه لأعلى ولأسفل.
يمكن استخدام BottomSheet لعرض مجموعة متنوعة من المحتوى، مثل:
معلومات إضافية، مثل معلومات المنتج أو تعريفات المصطلحات.
خيارات، مثل خيارات المشاركة أو خيارات الإعدادات.
حوارات، مثل حوارات التحقق من كلمة المرور أو حوارات تأكيد الشراء.
يمكن أن يكون BottomSheet أداة مفيدة لتحسين تجربة المستخدم في التطبيقات. يمكن استخدامه لعرض المعلومات بطريقة لا تقاطع تفاعل المستخدم مع المحتوى الرئيسي للتطبيق.
فيما يلي بعض الأمثلة على كيفية استخدام BottomSheet في التطبيقات:
في تطبيق الموسيقى، يمكن استخدام BottomSheet لعرض قائمة التشغيل الحالية أو لعرض خيارات التحكم في التشغيل.
في تطبيق الويب، يمكن استخدام BottomSheet لعرض نموذج الإكمال التلقائي أو لعرض معلومات إضافية حول صفحة الويب الحالية.
في تطبيق التسوق، يمكن استخدام BottomSheet لعرض قائمة المنتجات المفضلة أو لعرض خيارات الشراء.
بشكل عام، يمكن أن يكون BottomSheet أداة مرنة وقوية يمكن استخدامها لتحسين تجربة المستخدم في مجموعة متنوعة من التطبيقات.
How to use DraggableScrollableSheet and show appbar after scroll
في هذا الكود لدينا متغير scrollPosition وهو لمعرفة مقدار رفع ال DraggableScrollableSheet لكي نعرف هل ظهر بشكل كامل ام لا واذا كان ظهر بشكل كامل سوف نقوم باظهار العنصر الذي فوقه والذي يحتوي على ايقونه ونص ولدينا متغير showBottomSheet وهو مسؤول عن اظهار او اخفاء ال DraggableScrollableSheet كما هو موضح بالمثال التالي .
bottom.dart
class _ScrollSmothState extends State<ScrollSmooth> {
@override
void initState() {
super.initState();
}
double scrollPosition = 0;
bool showBottomSheet = false;
@override
Widget build(BuildContext context) {
return BlocBuilder<MainBlocCubit, MainBlocState>(
builder: (context, state) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Positioned.fill(
bottom: MediaQuery.of(context).size.height * 0.001,
child: Image.network(
'https://images.unsplash.com/photo-1532154066703-3973764c81fe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
fit: BoxFit.cover,
),
),
Positioned(
left: 50,
right: 50,
top: 100,
child: SizedBox(
height: 50,
width: 50,
child: ElevatedButton(
onPressed: () {
setState(() {
showBottomSheet = !showBottomSheet;
});
},
child: const Text('Change State'),
),
),
),
Positioned(
right: 0,
left: 0,
top: -170 * ( 1 - scrollPosition),
child: Material(
elevation: 10,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.of(context).pop(),
),
Text('Back'),
],
),
],
),
),
),
if (showBottomSheet)
Positioned.fill(
child: NotificationListener<DraggableScrollableNotification>(
onNotification: (notification) {
setState(() {
scrollPosition = 2 * notification.extent - 0.8;
});
print(scrollPosition);
return true;
},
child: DraggableScrollableSheet(
maxChildSize: 0.9,
minChildSize: 0.4,
builder: (context, scrollController) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(20),
),
),
child: ListView.builder(
itemCount: 20,
controller: scrollController,
itemBuilder: (context, index) => ListTile(
title: Text('item $index'),
),
),
);
},
),
),
),
],
),
),
);
},
);
}
}
