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
3
Answers
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,
try Wrapping your scaffold body’s Column with SingleChildScrollView it should fix the issue!
There are two possible solutions.
wrap your widget with SingleChildScrollview.
for example