Flutter هي إطار عمل متعدد المنصات يسمح للمطورين بإنشاء تطبيقات عالية الجودة التي تعمل على أنظمة iOS و Android و Web وغيرها. واحدة من العناصر الأساسية في تصميم التطبيقات هي RadioListTile، والذي يسمح للمستخدمين بتحديد خيار واحد فقط من بين قائمة.
ما هو RadioListTile في فلاتر؟
RadioListTile هو عنصر تحكم يُستخدم في تطبيقات Flutter لتمكين المستخدمين من تحديد خيار واحد فقط من بين قائمة. يتم تمثيل الخيارات بعلامات اختيار (radio buttons) دائرية، يتم وضع نقطة داخل الدائرة عندما يتم تحديد الخيار.
“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“
خصائص RadioListTile
تحتوي RadioListTile على عدد من الخصائص التي يمكن تعديلها لتحقيق السلوك المطلوب. فيما يلي تفاصيل كل خاصية:
title
هي عنوان العنصر التحكم RadioListTile الذي يظهر بجوار الدائرة. إذا كانت هذه الخاصية فارغة، فلن يظهر أي عنوان.
RadioListTile( title: Text('Option 1'), value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
subtitle
هي نص يظهر تحت العنوان ويتم استخدامه للمزيد من التفاصيل عن الخيار.
RadioListTile( title: Text('Option 1'), subtitle: Text('Option 1 is selected'), value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
value
هي القيمة التي يتم تعيينها للخيار عندما يتم تحديده.
RadioListTile( title: Text('Option 1'), value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“
groupValue
هي القيمة التي تم تحديدها في الخيار المحدد في المجموعة.
RadioListTile( title: Text('Option 1'), value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
onChanged
هي دالة تستدعى عندما يتم تغيير حالة الخيار.
RadioListTile( title: Text('Option 1'), value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
activeColor
هي لون الدائرة عندما يتم تحديدها.
RadioListTile( title: Text('Option 1'), activeColor: Colors.red, value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
toggleable
هي قيمة منطقية تحدد ما إذا كان بإمكان المستخدم إلغاء تحديد الخيار المحدد عن طريق النقر عليه مرة أخرى.
RadioListTile( title: Text('Option 1'), toggleable: true, value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
controlAffinity
هي موضع الدائرة في العنصر التحكم. يمكن استخدام القيمة
- ListTileControlAffinity.leading لوضع الدائرة على اليسار من العنصر التحكم
- ListTileControlAffinity.trailing لوضعها على اليمين.
RadioListTile( title: Text('Option 1'), controlAffinity: ListTileControlAffinity.leading, value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ),
مثال على استخدام RadioListTile في Flutter
يمكن استخدام RadioListTile في Flutter لتحديد خيار واحد من بين قائمة. يتم تخزين القيمة المحددة في متغير ويمكن استخدامه في التطبيق حسب الحاجة. فيما يلي مثال كامل على استخدام RadioListTile في Flutter:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { int _selectedValue = 1; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Radio List Tile Example', home: Scaffold( appBar: AppBar( title: const Text('Radio List Tile Example'), ), body: Column( children: <Widget>[ RadioListTile( title: const Text('Option 1'), value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = int.parse(value.toString()); }); }, ), RadioListTile( title: const Text('Option 2'), value: 2, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = int.parse(value.toString()); }); }, ), RadioListTile( title: const Text('Option 3'), value: 3, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = int.parse(value.toString()); }); }, ), ], ), floatingActionButton: FloatingActionButton( child: const Icon(Icons.done), onPressed: () { print('Selected option: $_selectedValue'); }, ), ), ); } }
في هذا المثال، تم استخدام RadioListTile لتحديد خيار واحد من بين قائمة. يتم تمثيل الخيارات بعلامات اختيار دائرية، يتم تخزين القيمة المحددة في _selectedValue. عند الضغط على الزر “Done”، يتم طباعة الخيار المحدد في وحدة تحكم الإخراج كونسول.
“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“
RadioListTile هو عنصر تحكم مهم في تصميم التطبيقات بإستخدام Flutter، حيث يتيح للمستخدمين تحديد خيار واحد فقط من بين قائمة. يمكن تعديل خصائص RadioListTile لتحقيق السلوك المطلوب، مثل العنوان والنص الفرعي والقيمة المحددة ولون الدائرة النشطة وموضع الدائرة في العنصر التحكم. يمكن استخدام RadioListTile في Flutter لتحديد الخيارات في التطبيقات والتحكم في سلوك التطبيق بناءً على الخيار المحدد.