ویجت 15 (ToggleButtons در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب (تکه کلام دوستان به من ومن به همه عذر می خوام زیاد میگم عادت کردم بهش :))) فلاتر یعنی ToggleButtonsهمین الان یکی از متون بالا با کلیک چپ انتخاب کنید چی می بینید یا متن های سایت های دیگه را اره یک یا چند گزینه بهت نمایش داده میشه مثلا Copy و Cut و Paste زیاد با این کلمات اشناییت داریم :)خوب این کار را را چطور در فلاتر ایجاد کنیم از اون جایی که فلاتر برای هر کاری راه حل خودش را داره این ویجت می تونه راه حل خوبی باشهبی وقفه بریم سراغ کدList<bool> isSelected = [false, false, false]; ToggleButtons( children: <Widget>[ Icon(Icons.format_bold), Icon(Icons.format_italic), Icon(Icons.link), ], isSelected: isSelected, onPressed: (int index) { setState(() { isSelected[index] = !isSelected[index]; }); }, )در داخل این ویجت 3 ایکون تعریف کردیم که گزینه های ما روی میزه و ارایه مورد نظر که در مرحله ی اول همه ی موارد False است را بهش می دهیم سپس کلیک برای گزینه هایمان تعریف میکنیم و با Index میشه تشخیص داد کدام کلیک شده است و در نهایت ان مورد مورد نظر را در ارایه اگر Flase بود به True و بالعکس تبدیل میکنیمبریم سراغ توضیح پارامتر های دیگرش اماده ای ؟ https://media.giphy.com/media/nFjDu1LjEADh6/giphy.gif پارامتر colorبه وسیله ی ان می تونیم رنگ ایکون ها را تعیین کنیمپارامتر selectedColorکه میتونیم رنگ ایکون انتخابی را مدیریت کنیمپارامتر fillColorکه رنگ مستطیل انتخابی را تنظیم میکندپارامتر highlightColorرنگ هایلایت انتخابی را ایجاد می کندپارامتر splashColor رنگی که کارب وقتی روی ان کلیک می کنه پخش میشهپارامتر borderColorخط دور این ویجت را مدیریت می کنیمپارامتر borderWidthاندازه ی خط دور ویجت را تنظیم می کنیمپارمتر borderRadiusمدیریت انحنای دور ویجت پارامتر renderBorderحذف خط دور ویجتاینم کل کد استفاده از این پارامتر هاimport 'package:flutter/material.dart'; class DemoToggleButtons extends StatefulWidget { @override _DemoToggleButtonsState createState() => _DemoToggleButtonsState(); } class _DemoToggleButtonsState extends State<DemoToggleButtons> { List<bool> isSelected = [false, true, false]; FocusNode focusNodeButton1 = FocusNode(); FocusNode focusNodeButton2 = FocusNode(); FocusNode focusNodeButton3 = FocusNode(); List<FocusNode> focusToggle; @override void initState() { // TODO: implement initState super.initState(); focusToggle = [focusNodeButton1, focusNodeButton2, focusNodeButton3]; } @override void dispose() { // Clean up the focus node when the Form is disposed. focusNodeButton1.dispose(); focusNodeButton2.dispose(); focusNodeButton3.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return MaterialApp( darkTheme: ThemeData.dark(), theme: ThemeData(brightness: Brightness.dark), home: Scaffold( appBar: AppBar( title: const Text('ToggleButtons'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ToggleButtons( color: Colors.greenAccent, selectedColor: Colors.amberAccent, fillColor: Colors.purple, splashColor: Colors.lightBlue, highlightColor: Colors.lightBlue, borderColor: Colors.white, borderWidth: 5, selectedBorderColor: Colors.greenAccent, renderBorder: true, borderRadius: BorderRadius.only( topLeft: Radius.circular(25), bottomRight: Radius.circular(25)), disabledColor: Colors.blueGrey, disabledBorderColor: Colors.blueGrey, focusColor: Colors.red, focusNodes: focusToggle, children: <Widget>[ Icon(Icons.format_bold), Icon(Icons.format_italic), Icon(Icons.link), ], isSelected: isSelected, onPressed: (int index) { setState(() { isSelected[index] = !isSelected[index]; }); }, ), SizedBox( height: 50, ), Container( decoration: BoxDecoration( color: Colors.black, ), child: Column( children: <Widget>[ Text('TV remote'), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('Previous'), onPressed: () { FocusScope.of(context) .requestFocus(focusNodeButton1); }, ), SizedBox( width: 20, ), RaisedButton( child: Text('Next'), onPressed: () { FocusScope.of(context) .requestFocus(focusNodeButton2); }, ), ], ), ], ), ) ], ), ), ), ); } }اما وقتی بخواهیم یکی از این موارد حداقل انتخاب شود چی ؟ onPressed: (int index) { setState(() { for (int indexBtn = 0;indexBtn < isSelected.length;indexBtn++) { if (indexBtn == index) { isSelected[indexBtn] = true; } else { isSelected[indexBtn] = false; } } }); }حالا اگر بخواهیم انتخاب نشده هم جزو گزینه هامون باشه چی ؟onPressed: (int index) { setState(() { for (int indexBtn = 0;indexBtn < isSelected.length;indexBtn++) { if (indexBtn == index) { isSelected[indexBtn] = !isSelected[indexBtn]; } else { isSelected[indexBtn] = false; } } }); }حالا اگر بخواهیم عمودی باشد چی ؟RotatedBox( quarterTurns: 1, child: ToggleButtons( color: Colors.greenAccent, children: <Widget>[ RotatedBox(quarterTurns: 3, child: Icon(Icons.format_bold)), RotatedBox(quarterTurns: 3, child: Icon(Icons.format_italic)), RotatedBox(quarterTurns: 3, child: Icon(Icons.link)), ], isSelected: isSelected, ), )به همین سادگی به همین خوشمزگی.اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)نوشته شده توسط پژمان حاجی حیدری یک علاقه مند به برنامه نویسیایدی کانال برای دسترسی به تمام اموزش ها @Learnpgلینک کانال https://t.me/joinchat/AAAAAFDR-mppe-ciC6X1Qgایدی تلگرام بنده @pejmanprogrammer