CODEWITHSUNDEEP
flutterdart
Kel
Kel

Reputation: 463

Flutter: How to color every single button of ToggleButtons

I have ToggleButtons as follows:

Map<String, bool> listButton = {'low': true, 'medium': true, 'high': true};

and I created myColor class like this:

var myColor = {"low": Colors.green, "medium": Colors.amberAccent, "high": Colors.red};

So how to show the color of ToggleButtons by property fillColor follows the color in myColor like this:

enter image description here

So pls help me, this is the main file:

import 'package:flutter/material.dart';

class ToggleButtonColor extends StatefulWidget {
  @override
  _ToggleButtonColorState createState() => _ToggleButtonColorState();
}

class _ToggleButtonColorState extends State<ToggleButtonColor> {
  Map<String, bool> listButton = {'low': true, 'medium': true, 'high': true};
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Toggle Button Color')),
        body: ToggleButtons(
            children: listButton.keys.map((e) => Text(e)).toList(),
            fillColor: myColor[listButton.keys], // I think this line needs to be corrected
            isSelected: listButton.values.toList(),
            onPressed: (int index) {
              String indexKey = listButton.keys.toList()[index];
              setState(() {
                listButton.update(indexKey, (value) => !value);
              });
            }));
  }
}

var myColor = {"low": Colors.green, "medium": Colors.amberAccent, "high": Colors.red};

Upvotes: 0

Views: 773

Answers (2)

Mitesh Mistri
Mitesh Mistri

Reputation: 459

You can also create your own toggle buttons like this.

import 'package:flutter/material.dart';

class MyButtons {
  Color bgColor;
  String title;
  bool isSelected;

  MyButtons({
    this.bgColor,
    this.title,
    this.isSelected,
  });
}

class ToggleButtonWidget extends StatefulWidget {
  @override
  _ToggleButtonWidgetState createState() => _ToggleButtonWidgetState();
}

class _ToggleButtonWidgetState extends State<ToggleButtonWidget> {
  List<MyButtons> buttons = [
    MyButtons(
      bgColor: Colors.green,
      title: 'low',
      isSelected: false,
    ),
    MyButtons(
      bgColor: Colors.yellowAccent,
      title: 'medium',
      isSelected: false,
    ),
    MyButtons(
      bgColor: Colors.red,
      title: 'high',
      isSelected: false,
    ),
  ];

  var myColor = {
    'low': Colors.green,
    'medium': Colors.yellow,
    'high': Colors.red,
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Toggle Button Colors',
        ),
      ),
      body: Row(
        children: buttons.map((btn) {
          return FlatButton(
            onPressed: () {
              setState(() {
                btn.isSelected = !btn.isSelected;
              });
            },
            child: Text(
              btn.title,
            ),
            color: btn.isSelected ? btn.bgColor : Colors.lightBlue[50],
          );
        }).toList(),
      ),
    );
  }
}

Hope this helps to figure out your problem.

Upvotes: 0

G3nt_M3caj
G3nt_M3caj

Reputation: 2685

You could do that by each child not in a common property fillColor An example:

class ToggleButtonColor extends StatefulWidget {
  @override
  _ToggleButtonColorState createState() => _ToggleButtonColorState();
}

class _ToggleButtonColorState extends State<ToggleButtonColor> {
  Map<String, bool> listButton = {'low': true, 'medium': true, 'high': true};
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Toggle Button Color')),
        body: ToggleButtons(
            children: listButton.keys.map((e) => Container(color: myColor[e], child: Text(e))).toList(),
            //Not here            fillColor: myColor[listButton.keys], // I think this line needs to be corrected
            isSelected: listButton.values.toList(),
            onPressed: (int index) {
              String indexKey = listButton.keys.toList()[index];
              setState(() {
                listButton.update(indexKey, (value) => !value);
              });
            }));
  }
}

var myColor = {"low": Colors.green, "medium": Colors.amberAccent, "high": Colors.red};

Put sizes properly if needed

Upvotes: 2

Related Questions