CODEWITHSUNDEEP
flutterdart
delmin
delmin

Reputation: 2690

How to reuse toggle buttons

I'm trying to find a best way to reuse a toggle button. I want from the toggle button widget to take as low parameters as possible which is List of strings which will build toggle buttons and selected string which will be used to select toggle button. And from onPressed in toggle button I want to return selected string which update selected string in main class. If selected value is null or doesn't match list then select and update selected to first string in toggle list. Here is where I get so far... (Sorry... having really tough time with it)

Here is toggle button widget

class ReuseToggle extends StatelessWidget {
  final List<String> children;
  final String selected;
  final Function onPressed;

  const ReuseToggle({this.selected, this.onPressed, this.children});
  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      children: children.map((text) => Text(text)).toList(),
      onPressed: (int index) {
        print(index);
      },
/// logic from official documentation
//        for (int buttonIndex = 0;
//            buttonIndex < isSelected.length;
//            buttonIndex++) {
//          if (buttonIndex == index) {
//            isSelected[buttonIndex] = true;
//          } else {
//            isSelected[buttonIndex] = false;
//          }
//        }
//      },
      isSelected: [true, false],
    );
  }
}

and main class

class MaterialScreen extends StatefulWidget {
  @override
  _MaterialScreenState createState() => _MaterialScreenState();
}

List<String> list = ['value1', 'value2'];
String selectedToggle;

class _MaterialScreenState extends State<MaterialScreen> {
  Widget build(BuildContext context) {
    return ReuseToggle(
      children: list,
      selected: selectedToggle,
      onPressed: (value) {
        setState(() {
          selectedToggle = value;
        });
      },
    );
  }
}

Upvotes: 3

Views: 973

Answers (1)

LonelyWolf
LonelyWolf

Reputation: 4392

Here is one solution however you will have to initialise your selectedToggle in your main class. This way if the selectedToggle is null your toggle buttons will be unselected and your selectedToggle updates on first onPressed. 

class ReuseToggle extends StatelessWidget {
  final List<String> children;
  final String selected;
  final Function onPressed;

  const ReuseToggle({this.selected, this.onPressed, this.children});
  @override
  Widget build(BuildContext context) {
    List<bool> isSelected = [];
    for (int i = 0; i < children.length; i++) {
      if (children[i] == selected) {
        isSelected.add(true);
      } else {
        isSelected.add(false);
      }
    }

    return ToggleButtons(
      children: children.map((text) => Text(text)).toList(),
      onPressed: (int index) {
        for (int buttonIndex = 0;
            buttonIndex < isSelected.length;
            buttonIndex++) {
          if (buttonIndex == index) {
            isSelected[buttonIndex] = true;
          } else {
            isSelected[buttonIndex] = false;
          }
        }
        onPressed(children[index]);
      },
      isSelected: isSelected,
    );
  }
}

Upvotes: 1

Related Questions