في Flutter، يمكن استخدام العديد من المكونات لتصميم واجهات المستخدم ، بما في ذلك BottomSheet ، الذي يستخدم لإظهار شريحة من الواجهة تنزل من الأسفل. يمكن استخدام BottomSheet في Flutter لعرض المزيد من المحتوى أو العمليات التفاعلية.
في هذا المقال ، سنشرح BottomSheet ونوضح جميع خصائصه بالتفصيل ونوضح كيفية استخدامه في تصميم واجهات المستخدم.
خصائص BottomSheet
يمكن تحديد خصائص BottomSheet باستخدام العديد من الخصائص التي تحدد شكل ومظهر BottomSheet والتحكم في المحتوى. يمكن استخدام العديد من الخصائص في BottomSheet في Flutter.
“اقرأ أيضاً: شرح استخدام ويدجت AnimatedIcon في فلاتر“
1- backgroundColor
تسمح هذه الخاصية بتحديد لون خلفية BottomSheet.
void _showBottomSheet(BuildContext context) { showModalBottomSheet<void>( context: context, backgroundColor: Colors.grey[200], builder: (BuildContext context) { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ const ListTile( leading: Icon(Icons.music_note), title: Text('Music'), subtitle: Text('Select your favorite music'), ), const ListTile( leading: Icon(Icons.videocam), title: Text('Video'), subtitle: Text('Select your favorite video'), ), ], ), ); }, ); }
“اقرأ أيضاً: شرح استخدام MaterialApp في فلاتر“
2- shape
تسمح هذه الخاصية بتحديد شكل BottomSheet.
void _showBottomSheet(BuildContext context) { showModalBottomSheet<void>( context: context, shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0), ), ), builder: (BuildContext context) { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ const ListTile( leading: Icon(Icons.music_note), title: Text('Music'), subtitle: Text('Select your favorite music'), ), const ListTile( leading: Icon(Icons.videocam), title: Text('Video'), subtitle: Text('Select your favorite video'), ), ], ), ); }, ); }
3- elevation
تسمح هذه الخاصية بتحديد مستوى الارتفاع ل BottomSheet.
void _showBottomSheet(BuildContext context) { showModalBottomSheet<void>( context: context, elevation: 5.0, builder: (BuildContext context) { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ const ListTile( leading: Icon(Icons.music_note), title: Text('Music'), subtitle: Text('Select your favorite music'), ), const ListTile( leading: Icon(Icons.videocam), title: Text('Video'), subtitle: Text('Select your favorite video'), ), ], ), ); }, ); }
4- clipBehavior
تسمح هذه الخاصية بتحديد كيفية عرض ال BottomSheet في الشاشة.
void _showBottomSheet(BuildContext context) { showModalBottomSheet<void>( context: context, clipBehavior: Clip.hardEdge, builder: (BuildContext context) { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ const ListTile( leading: Icon(Icons.music_note), title: Text('Music'), subtitle: Text('Select your favorite music'), ), const ListTile( leading: Icon(Icons.videocam), title: Text('Video'), subtitle: Text('Select your favorite video'), ), ], ), ); }, ); }
“اقرأ أيضاً: شرح استخدام ويدجت Wrap في فلاتر“
BottomSheet هو واحد من المكونات الأساسية في Flutter والتي تستخدم لإظهار شريحة من الواجهة تنزل من الأسفل. يمكن استخدام BottomSheet في Flutter لعرض المزيد من المحتوى أو العمليات التفاعلية. تم شرح جميع خصائص BottomSheet وتم توضيحها بالأكواد في هذا المقال لتسهيل استخدامها في تصميم واجهات المستخدم في Flutter.