CODEWITHSUNDEEP
flutter
ThorMJ
ThorMJ

Reputation: 89

How can I disable individual buttons on a flutter togglebutton widget?

So... I have a togglebutton widget [1|2|3|4], but if another widget is checked, I need to disable some of those buttons (eg, if I'm connecting to a Tile instead of a Frob, I need to disable 2 & 4).

Upvotes: 0

Views: 852

Answers (3)

BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

Use the newer recommended material 3 widget, SegmentedButton as it has native support for enabled on each individual ButtonSegment. I've deliberated used a custom child widget in icon parameter of ButtonSegment in my example to show that you can fully customise the whole button inside the icon parameter - otherwise, it gives the impression that it is very non-customisable compared to ToggleButton, which is not the case.

class SegmentedButtonExample extends StatefulWidget {
  const SegmentedButtonExample({super.key});

  @override
  State<SegmentedButtonExample> createState() => _SegmentedButtonExampleState();
}

class _SegmentedButtonExampleState extends State<SegmentedButtonExample> {
  var _value = <int>{};
  final _options = [1, 2, 3];
  final _disabledOptions = [2];

  @override
  Widget build(BuildContext context) {
    return SegmentedButton(
      showSelectedIcon: false,
      emptySelectionAllowed: true,
      onSelectionChanged: (value) => _value = value,
      selected: _value,
      segments: <ButtonSegment<int>>[
        for (final (option) in _options)
          ButtonSegment(
            enabled: !_disabledOptions.contains(option),
            icon: Container(
                color: Colors.red,
                child: Column(children: [
                  const Icon(Icons.add),
                  Text(option.toString()),
                ])),
            value: option,
          ),
      ],
    );
  }
}

Upvotes: 0

Nick Khotenko
Nick Khotenko

Reputation: 767

I found that the best way is to have the a function that returns ToggleButtons widget based on certain input parameters. So the function returns ToggleButton widgets whatever number of toggle buttons you want. In case you want 3 buttons, you would pass in a list of 3 bools, take that list and build the ToggleButtons widget with only 3 buttons...and so on. And/Or you can have a condition that builds different ToggleButtons widget based on a certain parameter:

         ToggleButtons toggleButtons(
              {required StateSetter setState,
              required List<bool> isSelected,
              required String nameOfButtons}) {
            if (nameOfButtons == "shortList") {
            // return ToggleButtons widget that only has 3 Toggle Buttons
              return ToggleButtons(...);
            } else {
            // return ToggleButtons widget that only has 2 Toggle Buttons
             return ToggleButtons(...);
             }});

Visibility will simply hide the content of the toggle button but still allow a user to press that button. Also if you have an outline on your toggle buttons, the inside will just be blank but.

Upvotes: 1

Elvis Salabarria Aquino
Elvis Salabarria Aquino

Reputation: 598

you can play with Visibility to hide or not the widgets you want

Upvotes: 1

Related Questions