fluttercommunity / community

Flutter Community - A central place for community made Flutter content.
1.57k stars 121 forks source link

Troubleshooting Flutter Button Color Issue: Selected Background Color Not Applying as ExpectedDiscussion: [TOPIC NAME] #127

Closed Sundramcr07 closed 1 year ago

Sundramcr07 commented 1 year ago

Troubleshooting Flutter Button Color Issue: Selected Background Color Not Applying as Expected

"I'm working on a Flutter app with a custom InputButton widget that allows users to select items. When an item is selected, the button's background color should change to a specified color (isSelectedBgColor) and the text color should also change (isSelectedTextColor). However, even though I've set the background color to Colors.blue.shade300 and the text color to the desired value, the button's background color appears gray when selected. I've confirmed that the _StudenceInputButtonState widget is being rebuilt when the button is clicked. Despite this, the selected background color is not being applied as expected, and the button's appearance remains unchanged. How can I troubleshoot and resolve this issue to make sure the selected colors are applied correctly to the button's background and text?

` class InputButton extends StatefulWidget { late final Color backgroundColor; late final Color textColor; final Color isSelectedBgColor; // New parameter for selected background color final Color isSelectedTextColor; // New parameter for selected text color final double height; final double width; final double borderRadius; final List itemList; final ValueNotifier controller; final bool isVisible; final ButtonAlignment alignment; final double buttonSpacing;

InputButton({ required this.backgroundColor, required this.textColor, required this.isSelectedBgColor, required this.isSelectedTextColor, required this.height, required this.width, required this.borderRadius, required this.itemList, required this.controller, this.isVisible = true, this.alignment = ButtonAlignment.HORIZONTAL, this.buttonSpacing = 10.0, });

@override _InputButtonState createState() => _InputButtonState(); }

class _InputButtonState extends State { static final Map<String, bool> buttonSelections = {}; bool isAnyButtonSelected = true;

@override void initState() { super.initState();

// Initialize buttonSelections map
for (var item in widget.itemList) {
  buttonSelections[item.name] = false;
}
if (widget.itemList.isNotEmpty) {
  buttonSelections[widget.itemList[0].name] = true;
}

}

@override Widget build(BuildContext context) { print("Widget is being rebuilt!"); return Visibility( visible: widget.isVisible, child: widget.alignment == ButtonAlignment.horizontal ? Row( children: _buildButtons(), ) : Column( children: _buildButtons(), ), ); }

List _buildButtons() { List buttons = []; for (var item in widget.itemList) { String label = item.name; Color borderColor = widget.isSelectedBgColor; buttons.add( SizedBox( height: widget.height, width: widget.width, child: ElevatedButton( onPressed: getButtonSelection(label) ? null : () async { setState(() { setButtonSelection(label); }); }, style: ElevatedButton.styleFrom( textStyle: TextStyle(color: getTextColor(getButtonSelection(label))), backgroundColor: getBgColor(getButtonSelection(label)), foregroundColor: getTextColor(getButtonSelection(label)), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(widget.borderRadius), side: BorderSide(color: borderColor), ), ), child: ValueListenableBuilder( valueListenable: widget.controller, builder: (context, isLoading, child) { if (isLoading) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( width: 20, height: 20, child: CircularProgressIndicator( color: getTextColor(getButtonSelection(label)), ), ), SizedBox(width: 10), Text( label, style: TextStyle( color: getTextColor(getButtonSelection(label))), ), ], ); } else { return Text( label, style: TextStyle( color: getTextColor(getButtonSelection(label))), ); } }, ), ), ), );

  // Add spacing between buttons
  if (widget.alignment == ButtonAlignment.horizontal) {
    buttons.add(SizedBox(width: widget.buttonSpacing));
  } else {
    buttons.add(SizedBox(height: widget.buttonSpacing));
  }
}

return buttons;

}

void setButtonSelection(String selectedKey) { setState(() { for (String key in buttonSelections.keys) { buttonSelections[key] = key == selectedKey; } }); }

bool getButtonSelection(String label) { return buttonSelections[label]!; }

void _handleButtonPressed(String label) { print("Button with label '$label' pressed."); // Perform action based on the pressed button label }

Color getBgColor(bool buttonSelection) { if (buttonSelection) { print(widget.isSelectedBgColor); return Colors.blue.shade300; } else { return widget.backgroundColor; } }

Color getTextColor(bool buttonSelection) { if (buttonSelection) { return widget.isSelectedTextColor; } else { return widget.textColor; } } }`