setState() or markNeedsBuild() called during build. I've tried WidgetsBinding.instance.addPostFrameCallback but then my buttons do not works

Question

import 'package:customizedapp/reuseable_card.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_content.dart';
import 'constants.dart';

enum Gender {
  male,
  female,
}

class InputPage extends StatefulWidget {
  const InputPage({Key? key}) : super(key: key);

  @override
  State<InputPage> createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  Gender? selectedGender;
  double height = 0.0;
  int weight = 0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'BMI Calculator',
            style: TextStyle(fontSize: 20.0),
          ),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReusableCard(
                      colour: selectedGender == Gender.male
                          ? kActiveReusealeContainerColor
                          : kInactiveReusealeContainerColor,
                      containChild: IconContent(FontAwesomeIcons.mars, 'MALE'),
                      onPress: () {
                        setState(() {
                          selectedGender = Gender.male;
                        });
                      },
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      colour: selectedGender == Gender.female
                          ? kActiveReusealeContainerColor
                          : kInactiveReusealeContainerColor,
                      containChild:
                          IconContent(FontAwesomeIcons.venus, 'FEMALE'),
                      onPress: () {
                        setState(() {
                          selectedGender = Gender.female;
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ReusableCard(
                colour: kActiveReusealeContainerColor,
                containChild: Column(
                  children: [
                    Text(
                      'Height',
                      style: kLabelTextStyle,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.baseline,
                      textBaseline: TextBaseline.alphabetic,
                      children: [
                        Text(
                          height.toStringAsFixed(2),
                          style: kNumberDisplayTextStyle,
                        ),
                        Text(
                          'ft',
                          style: kLabelTextStyle,
                        ),
                      ],
                    ),
                    SliderTheme(
                      data: SliderThemeData(
                        activeTrackColor: Colors.white,
                        inactiveTrackColor: Color(0xff8E8E9C),
                        thumbShape: RoundSliderThumbShape(
                            enabledThumbRadius: 12.0, elevation: 5),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 24),
                        thumbColor: Color(0xffDF4068),
                        overlayColor: Color(0x29DF4068),
                      ),
                      child: Slider(
                          value: height,
                          min: kMinSliderValue,
                          max: kMaxSliderValue,
                          onChanged: (double newValue) {
                            setState(() {
                              height = newValue;
                            });
                          }),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReusableCard(
                      colour: kActiveReusealeContainerColor,
                      containChild: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            'Weight',
                            style: kLabelTextStyle,
                          ),
                          Text(
                            weight.toString(),
                            style: kNumberDisplayTextStyle,
                          ),

'here in the row I'm getting error, i've tried by wrapping row and children in Expanded widget but doesn't works either'

                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              RoundButton(
                                  icon: FontAwesomeIcons.add,
                                  onPressed: () {
                                    setState(() {
                                      weight++;
                                    });
                                  }),
                              SizedBox(
                                width: 10,
                              ),
                              RoundButton(
                                  icon: FontAwesomeIcons.minus,
                                  onPressed: () {
                                    setState(() {
                                      weight--;
                                    });
                                  }),
                            ],
                            
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      colour: kActiveReusealeContainerColor,
                      containChild: Container(),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: kBottomContainerHeight,
              margin: EdgeInsets.only(top: 10),
              width: double.infinity,
              color: kBottomContainerColor,
            ),
          ],
        ),
      ),
    );
  }
}

class RoundButton extends StatelessWidget {
  const RoundButton({Key? key, required this.icon, required this.onPressed})
      : super(key: key);
  final IconData icon;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
        onPressed: onPressed(),
        child: Icon(icon),
        fillColor: kInactiveReusealeContainerColor,
        constraints: BoxConstraints(minWidth: 56, minHeight: 56),
        shape: CircleBorder());
  }
}

'this error occurs'

This InputPage widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase. The widget on which setState() or markNeedsBuild() was called was: InputPage state: _InputPageState#98c9c The widget which was currently being built when the offending call was made was: RoundButton dirty'

Answer 1

Replace onPressed: onPressed(), with onPressed: onPressed,. You like to call the event when the button is pressed instead of build time.