ویجت ToggleButtons
در فلاتر، یک گروه از دکمههای سوئیچ با متن و تصویر است که به کاربر اجازه میدهد بین چندین گزینه انتخاب کند. در این ویجت، هر گزینه میتواند دارای یک آیکون و یک متن باشد و کاربر میتواند بین چندین گزینه در یک گروه سوئیچ کند.
در ادامه یک مثال ساده برای استفاده از ToggleButtons
ارائه میدهیم:
class ToggleButtonsExample extends StatefulWidget {
@override
_ToggleButtonsExampleState createState() => _ToggleButtonsExampleState();
}
class _ToggleButtonsExampleState extends State<ToggleButtonsExample> {
List<bool> _selections = List.generate(3, (_) => false);
List<String> _options = ['Option 1', 'Option 2', 'Option 3'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ToggleButtons Example'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ToggleButtons(
children: <Widget>[
Icon(Icons.format_align_left),
Icon(Icons.format_align_center),
Icon(Icons.format_align_right),
],
isSelected: _selections,
onPressed: (int index) {
setState(() {
_selections[index] = !_selections[index];
});
},
),
SizedBox(height: 20),
Text(_options.where((e) => _selections[_options.indexOf(e)]).join(", ")),
],
),
),
);
}
}
در این مثال، ToggleButtons
شامل 3 دکمه با آیکونهای مختلف قرار داده شده است. هر گزینه با استفاده از یک آرایه bool
پیشفرض false
از انتخاب کاربر پیگیری میشود. هنگامی که کاربر بر روی یک گزینه کلیک میکند، وضعیت bool
مربوط به آن گزینه به صورت تغییر یافته تعیین میشود. برای نمایش گزینههایی که کاربر انتخاب کرده است، از روش where
بر روی لیست options
و با استفاده از آرایه selections
استفاده شده است.
همچنین، ToggleButtons
دارای پارامترهایی همچون color
, selectedColor
, borderColor
, borderRadius
و … است که میتوانند به منظور تنظیم ظاهر ویجت استفاده شوند. برای مثال، پارامتر color
برای تنظیم رنگ دکمهها و پارامتر selectedColor
برای تنظیم رنگ دکمههایی که انتخاب شدهاند، مورد استفاده قرار میگیرند.
در کل، ToggleButtons
یک ویجت کارآمد و کاربردی برای ایجاد گروههایی از دکمههای سوئیچ است که کاربر میتواند به راحتی بین آنها جابهجا شود و از آنها استفاده کند.