ویجت 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 و بالعکس تبدیل میکنیم

بریم سراغ توضیح پارامتر های دیگرش اماده ای ؟

پارامتر 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