skip to Main Content

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


  1. Chosen as BEST ANSWER

    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,
        );
      }
    }
    

  2. try Wrapping your scaffold body’s Column with SingleChildScrollView it should fix the issue!

    Login or Signup to reply.
  3. 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');
                          });
                        },
    
    1. 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.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search