Why its show overflow when I am going to using seState() function? - flutter

Question

Normally all things is good but when I want to add setState() it show overflow. I am making an BMI calculator app and i create a custom button and i think there the problem started.
import 'package:flutter/material.dart';
class RoundIconButton extends StatelessWidget {
RoundIconButton({required this.icon, required this.tap});
final IconData icon;
final Function tap;
#override
Widget build(BuildContext context) {
return RawMaterialButton(
onPressed: tap(),
child: Icon(
icon,
color: Color(0xffFF8B00),
),
elevation: 6.0,
constraints: BoxConstraints.tightFor(
width: 40.0,
height: 47.0,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
fillColor: Colors.black,
);
}
}
import 'package:bmi_calculator/round_icon_button.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'reusable_card.dart';
import 'iconText.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;
int height = 180;
int weight = 50;
int age = 18;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.black,
title: Text('BMI Calculator'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.male;
print('Male tapped');
});
},
child: ReuseableCard(
colour: selectedGender == Gender.male
? kactiveCardColor
: kinactiveCardColor,
cardChild: iconText(
icon: FontAwesomeIcons.mars,
lable: 'Male',
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.female;
print('Female Tapped');
});
},
child: ReuseableCard(
colour: selectedGender == Gender.female
? kactiveCardColor
: kinactiveCardColor,
cardChild: iconText(
icon: FontAwesomeIcons.venus,
lable: 'FeMale',
),
),
),
),
],
),
),
Expanded(
child: ReuseableCard(
colour: Color(0xffFF8B00),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Height'.toUpperCase(),
style: klableTextStylet,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
height.toString(),
style: kNumberTextStyle,
),
Text('cm'),
],
),
SliderTheme(
data: SliderTheme.of(context).copyWith(
overlayColor: Colors.red,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15),
overlayShape: RoundSliderOverlayShape(overlayRadius: 30),
),
child: Slider(
value: height.toDouble(),
max: 220.0,
min: 50.0,
inactiveColor: Colors.yellow,
activeColor: Colors.black,
thumbColor: Colors.red,
onChanged: (double newValue) {
setState(() {
height = newValue.round();
print(newValue);
});
},
),
),
],
),
),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: ReuseableCard(
colour: Color(0xffFF8B00),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Weight'.toUpperCase(),
style: klableTextStylet,
),
Text(
weight.toString(),
style: kNumberTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
tap: (){
setState(() {
weight++;
});
},
icon: FontAwesomeIcons.plus,
),
SizedBox(
width: 10,
),
RoundIconButton(
tap: (){
setState(() {
weight--;
});
},
icon: FontAwesomeIcons.minus,
),
],
),
],
),
),
),
Expanded(
child: ReuseableCard(
colour: Color(0xffFF8B00),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Age'.toUpperCase(),
style: klableTextStylet,
),
Text(
age.toString(),
style: kNumberTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
tap: (){
setState(() {
age++;
});
},
icon: FontAwesomeIcons.plus,
),
SizedBox(
width: 10,
),
RoundIconButton(
tap: (){
setState(() {
age--;
});
},
icon: FontAwesomeIcons.minus,
),
],
),
],
),
),
),
],
),
),
Container(
child: Center(
child: Text(
'Your BMI Calculator',
style: TextStyle(
color: Color(0xffFF8B00),
),
)),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15), topRight: Radius.circular(15)),
),
width: double.infinity,
height: kbottomContainerHeight,
margin: EdgeInsets.only(top: 10),
),
],
),
);
}
}
In above code i want to add setstate function in RoundIconButton but when i try to add this it show overflow.I am expecting this But getting this

Answer 1

try Wrapping your scaffold body's Column with SingleChildScrollView it should fix the issue!

Answer 2

There are two possible solutions.
wrap your widget with SingleChildScrollview.
for example
body: SingelChildScrollView(
scrolldirection : Axis.horizontal
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.male;
print('Male tapped');
});
},
Remove above expanded you are using two Expanded widgets and both need some space on screen and the first Expanded is covering whole screen remove one of the extra Expanded widgets and wrap whole row with one single expanded.

Answer 3

I got the answer. Its about the old version of flutter. On flutter 2.0 we can do:
final Function tap;
onPresed: tap(),
but in flutter 3.0+ we have to do:
final Function() tap;
onPresed: tap,
class RoundIconButton extends StatelessWidget {
RoundIconButton({required this.icon, required this.tap});
final IconData icon;
final Function() tap; // add bracket here ?
#override
Widget build(BuildContext context) {
return RawMaterialButton(
onPressed: tap(),
child: Icon(
icon,
color: Color(0xffFF8B00),
),
elevation: 6.0,
constraints: BoxConstraints.tightFor(
width: 40.0,
height: 47.0,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
fillColor: Colors.black,
);
}
}