import 'package:diplomaticquarterapp/widgets/buttons/button.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'dart:math';

import 'body_fat_result_page.dart';

const activeCardColorGender = Color(0xffC5272D);
const inactiveCardColorGender = Color(0xffFAFAFd);
const activeCardColor = Color(0xff70777A);
const inactiveCardColor = Color(0xffFAFAFd);

class BodyFat extends StatefulWidget {
  @override
  _BodyFatState createState() => _BodyFatState();
}

class _BodyFatState extends State<BodyFat> {
  bool isMale = false;
  bool isHeightCm = true;
  Color maleCard = activeCardColorGender;
  Color femaleCard = inactiveCardColorGender;
  Color neckCmCard = activeCardColor;
  Color neckFtCard = inactiveCardColor;
  Color waistCmCard = activeCardColor;
  Color waistFtCard = inactiveCardColor;
  Color hipCmCard = activeCardColor;
  Color hipFtCard = inactiveCardColor;
  Color cmCard = activeCardColor;
  Color ftCard = inactiveCardColor;
  int neck = 10;
  int heightCm = 0;
  int heightFt = 0;
  int hip = 5;
  double heightInches;
  double minRange;
  double maxRange;
  double overWeightBy;
  int waist = 5;
  double bodyFat = 0;
  double fat = 0;
  String dropdownValue;
  double calories = 0;
  String textResult = '';
  TextEditingController heightController = TextEditingController();
  TextEditingController neckController = TextEditingController();
  TextEditingController waistController = TextEditingController();
  TextEditingController hipController = TextEditingController();

  @override
  void initState() {
    neckController.text = neck.toString();
    hipController.text = hip.toString();
    waistController.text = waist.toString();
    heightController.text = heightCm.toString();
    super.initState();
  }

  void updateColorHeight(int type) {
    //MG/DLT card
    if (type == 1) {
      if (cmCard == inactiveCardColor) {
        cmCard = activeCardColor;
        ftCard = inactiveCardColor;
      } else {
        cmCard = inactiveCardColor;
      }
    }
    if (type == 2) {
      if (ftCard == inactiveCardColor) {
        ftCard = activeCardColor;
        cmCard = inactiveCardColor;
      } else {
        ftCard = inactiveCardColor;
      }
    }
  }

  void updateColorNeck(int type) {
    //MG/DLT card
    if (type == 1) {
      if (neckCmCard == inactiveCardColor) {
        neckCmCard = activeCardColor;
        neckFtCard = inactiveCardColor;
      } else {
        neckCmCard = inactiveCardColor;
      }
    }
    if (type == 2) {
      if (neckFtCard == inactiveCardColor) {
        neckFtCard = activeCardColor;
        neckCmCard = inactiveCardColor;
      } else {
        neckFtCard = inactiveCardColor;
      }
    }
  }

  void updateColorWaist(int type) {
    //MG/DLT card
    if (type == 1) {
      if (waistCmCard == inactiveCardColor) {
        waistCmCard = activeCardColor;
        waistFtCard = inactiveCardColor;
      } else {
        waistCmCard = inactiveCardColor;
      }
    }
    if (type == 2) {
      if (waistFtCard == inactiveCardColor) {
        waistFtCard = activeCardColor;
        waistCmCard = inactiveCardColor;
      } else {
        waistFtCard = inactiveCardColor;
      }
    }
  }

  void updateColorHip(int type) {
    //MG/DLT card
    if (type == 1) {
      if (hipCmCard == inactiveCardColor) {
        hipCmCard = activeCardColor;
        hipFtCard = inactiveCardColor;
      } else {
        hipCmCard = inactiveCardColor;
      }
    }
    if (type == 2) {
      if (hipFtCard == inactiveCardColor) {
        hipFtCard = activeCardColor;
        hipCmCard = inactiveCardColor;
      } else {
        hipFtCard = inactiveCardColor;
      }
    }
  }

  void updateColor(int type) {
    //MG/DLT card
    if (type == 1) {
      if (maleCard == inactiveCardColorGender) {
        maleCard = activeCardColorGender;
        femaleCard = inactiveCardColorGender;
      } else {
        maleCard = inactiveCardColorGender;
      }
    }
    if (type == 2) {
      if (femaleCard == inactiveCardColorGender) {
        femaleCard = activeCardColorGender;
        maleCard = inactiveCardColorGender;
      } else {
        femaleCard = inactiveCardColorGender;
      }
    }
  }

  void calculateBodyFat() {
    if (isMale == true) {
      bodyFat = 495 / (1.0324 - 0.19077 * (log(waist - neck) / ln10) + 0.15456 * (log(heightCm) / ln10)) - 450;
      fat = (bodyFat * 10) / 10.round();
    } else if (isMale == false) {
      bodyFat = 495 / (1.29579 - 0.35004 * (log(waist + hip - neck) / ln10) + 0.22100 * (log(heightCm) / ln10)) - 450;
      fat = (bodyFat * 10) / 10.round();
    }
    if (fat <= 0) {
      fat = 0;
    }
  }

  void showTextResult() {
    if (isMale == false) {
      if (bodyFat > 9 && bodyFat <= 13) {
        textResult = 'The category falls under essential';
      } else if (bodyFat > 13 && bodyFat <= 20) {
        textResult = 'The category falls under athlete';
      } else if (bodyFat > 20 && bodyFat <= 24) {
        textResult = 'The category falls under fitness';
      } else if (bodyFat > 24 && bodyFat <= 31) {
        textResult = 'The category falls under acceptable';
      } else if (bodyFat > 31 && bodyFat <= 60) {
        textResult = 'The category falls under obese';
      } else if (bodyFat > 60) {
        textResult = 'Please check the value you have entered, since the body fat percentage has crosed the limits.';
      } else if (bodyFat <= 9) {
        textResult = 'Please check the value you have entered, since the body fat percentage cannot be this low.';
      }
    } else {
      if (bodyFat > 5 && fat <= 13) {
        textResult = 'The category falls under essential';
      } else if (bodyFat > 13 && bodyFat <= 17) {
        textResult = 'The category falls under athlete';
      } else if (bodyFat > 17 && bodyFat <= 24) {
        textResult = 'The category falls under fitness';
      } else if (bodyFat > 24 && bodyFat <= 45) {
        textResult = 'The category falls under obese';
      } else if (bodyFat > 45) {
        textResult = 'Please check the value you have entered, since the body fat percentage has crosed the limits.';
      } else if (bodyFat <= 5) {
        textResult = 'Please check the value you have entered, since the body fat percentage cannot be this low.';
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      appBarTitle: 'Body Fat',
      showHomeAppBarIcon: false,
      appBarIcons: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 7.0),
          child: Icon(
            Icons.info_outline,
            color: Colors.white,
          ),
        )
      ],
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 25.0, vertical: 15.0),
        child: SingleChildScrollView(
          child: Container(
            height: 1000.0,
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Texts('Estimates the total body fat based on\n the size'),
                ),
                Divider(
                  thickness: 2.0,
                ),
                SizedBox(
                  height: 5.0,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Texts('Gender'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Container(
                      width: 350,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(35.0),
                          color: Colors.white,
                          border: Border.all(
                            color: Colors.black45,
                          )),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColor(1);
                                isMale = false;
                              });
                            },
                            child: Container(
                              height: 55.0,
                              width: 170.0,
                              decoration: BoxDecoration(
                                color: maleCard,
                                borderRadius: BorderRadius.circular(35.0),
                              ),
                              child: Center(child: Texts('FEMALE')),
                            ),
                          ),
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColor(2);
                                isMale = true;
                              });
                            },
                            child: Container(
                              height: 55.0,
                              width: 170.0,
                              decoration: BoxDecoration(
                                color: femaleCard,
                                borderRadius: BorderRadius.circular(35.0),
                              ),
                              child: Center(child: Texts('MALE')),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Texts(
                      'Height',
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            width: 340.0,
                            height: 60.0,
                            decoration: BoxDecoration(
                              color: Colors.white,
                            ),
                            child: Row(
                              children: [
                                Padding(
                                  padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
                                  child: Center(
                                    child: Container(
                                      width: 60.0,
                                      foregroundDecoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(5.0),
                                        border: Border.all(
                                          color: Colors.blueGrey,
                                          width: 2.0,
                                        ),
                                      ),
                                      child: Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Center(
                                              child: Padding(
                                                padding: const EdgeInsets.only(left: 10.0),
                                                child: TextFormField(
                                                  keyboardType: TextInputType.number,
                                                  controller: heightController,
                                                ),
                                              ),
                                            ),
                                          ),
                                          Container(
                                            height: 38.0,
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.center,
                                              mainAxisAlignment: MainAxisAlignment.center,
                                              children: <Widget>[
                                                Container(
                                                  decoration: BoxDecoration(
                                                    border: Border(
                                                      bottom: BorderSide(
                                                        width: 0.5,
                                                      ),
                                                    ),
                                                  ),
                                                  child: InkWell(
                                                    child: Icon(
                                                      Icons.arrow_drop_up,
                                                      size: 18.0,
                                                    ),
                                                    onTap: () {
                                                      setState(() {
                                                        if (heightCm < 250) heightCm++;
                                                        heightController.text = heightCm.toString();
                                                      });
                                                    },
                                                  ),
                                                ),
                                                InkWell(
                                                  child: Icon(
                                                    Icons.arrow_drop_down,
                                                    size: 18.0,
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      if (heightCm > 0) heightCm--;
                                                      heightController.text = heightCm.toString();
                                                    });
                                                  },
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: Slider(
                                    value: heightCm.toDouble(),
                                    min: 0,
                                    max: 250,
                                    onChanged: (double newValue) {
                                      setState(() {
                                        heightCm = newValue.round();
                                        heightController.text = heightCm.toString();
                                      });
                                    },
                                    activeColor: Color(0xffC5272D),
                                    inactiveColor: Color(0xffF3C5C6),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    Texts('Select Unit'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorHeight(1);
                              isHeightCm = true;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                              color: cmCard,
                              borderRadius: BorderRadius.circular(3.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 18.0),
                              child: Center(child: Texts('CM')),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorHeight(2);
                              isHeightCm = false;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              color: ftCard,
                              borderRadius: BorderRadius.circular(3.0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 16.0),
                              child: Center(child: Texts('Ft')),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Texts(
                      'Neck',
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            width: 340.0,
                            height: 60.0,
                            decoration: BoxDecoration(
                              color: Colors.white,
                            ),
                            child: Row(
                              children: [
                                Padding(
                                  padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
                                  child: Center(
                                    child: Container(
                                      width: 60.0,
                                      foregroundDecoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(5.0),
                                        border: Border.all(
                                          color: Colors.blueGrey,
                                          width: 2.0,
                                        ),
                                      ),
                                      child: Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Center(
                                              child: Padding(
                                                padding: const EdgeInsets.only(left: 15.0, bottom: 0),
                                                child: TextFormField(
                                                  keyboardType: TextInputType.number,
                                                  controller: neckController,
                                                ),
                                              ),
                                            ),
                                          ),
                                          Container(
                                            height: 38.0,
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.center,
                                              mainAxisAlignment: MainAxisAlignment.center,
                                              children: <Widget>[
                                                Container(
                                                  decoration: BoxDecoration(
                                                    border: Border(
                                                      bottom: BorderSide(
                                                        width: 0.5,
                                                      ),
                                                    ),
                                                  ),
                                                  child: InkWell(
                                                    child: Icon(
                                                      Icons.arrow_drop_up,
                                                      size: 18.0,
                                                    ),
                                                    onTap: () {
                                                      setState(() {
                                                        if (neck < 60) neck++;
                                                        neckController.text = neck.toString();
                                                      });
                                                    },
                                                  ),
                                                ),
                                                InkWell(
                                                  child: Icon(
                                                    Icons.arrow_drop_down,
                                                    size: 18.0,
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      if (neck > 5) neck--;
                                                      neckController.text = neck.toString();
                                                    });
                                                  },
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: Slider(
                                    value: neck.toDouble(),
                                    min: 5,
                                    max: 60,
                                    onChanged: (double newValue) {
                                      setState(() {
                                        neck = newValue.round();
                                        neckController.text = neck.toString();
                                      });
                                    },
                                    activeColor: Color(0xffC5272D),
                                    inactiveColor: Color(0xffF3C5C6),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    Texts('Select Unit'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorNeck(1);
                              isHeightCm = true;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                              color: neckCmCard,
                              borderRadius: BorderRadius.circular(3.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 18.0),
                              child: Center(child: Texts('CM')),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorNeck(2);
                              isHeightCm = false;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              color: neckFtCard,
                              borderRadius: BorderRadius.circular(3.0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 16.0),
                              child: Center(child: Texts('Ft')),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Texts(
                      'Waist',
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            width: 340.0,
                            height: 60.0,
                            decoration: BoxDecoration(
                              color: Colors.white,
                            ),
                            child: Row(
                              children: [
                                Padding(
                                  padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
                                  child: Center(
                                    child: Container(
                                      width: 60.0,
                                      foregroundDecoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(5.0),
                                        border: Border.all(
                                          color: Colors.blueGrey,
                                          width: 2.0,
                                        ),
                                      ),
                                      child: Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Center(
                                              child: Padding(
                                                padding: const EdgeInsets.only(left: 10.0),
                                                child: TextFormField(
                                                  keyboardType: TextInputType.number,
                                                  controller: waistController,
                                                ),
                                              ),
                                            ),
                                          ),
                                          Container(
                                            height: 38.0,
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.center,
                                              mainAxisAlignment: MainAxisAlignment.center,
                                              children: <Widget>[
                                                Container(
                                                  decoration: BoxDecoration(
                                                    border: Border(
                                                      bottom: BorderSide(
                                                        width: 0.5,
                                                      ),
                                                    ),
                                                  ),
                                                  child: InkWell(
                                                    child: Icon(
                                                      Icons.arrow_drop_up,
                                                      size: 18.0,
                                                    ),
                                                    onTap: () {
                                                      setState(() {
                                                        if (waist < 200) waist++;
                                                        waistController.text = waist.toString();
                                                      });
                                                    },
                                                  ),
                                                ),
                                                InkWell(
                                                  child: Icon(
                                                    Icons.arrow_drop_down,
                                                    size: 18.0,
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      if (waist > 5) waist--;
                                                      waistController.text = waist.toString();
                                                    });
                                                  },
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: Slider(
                                    value: waist.toDouble(),
                                    min: 5,
                                    max: 200,
                                    onChanged: (double newValue) {
                                      setState(() {
                                        waist = newValue.round();
                                        waistController.text = waist.toString();
                                      });
                                    },
                                    activeColor: Color(0xffC5272D),
                                    inactiveColor: Color(0xffF3C5C6),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    Texts('Select Unit'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorWaist(1);
                              isHeightCm = true;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                              color: waistCmCard,
                              borderRadius: BorderRadius.circular(3.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 18.0),
                              child: Center(child: Texts('CM')),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorWaist(2);
                              isHeightCm = false;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              color: waistFtCard,
                              borderRadius: BorderRadius.circular(3.0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 16.0),
                              child: Center(child: Texts('Ft')),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Texts(
                      'Hip',
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            width: 340.0,
                            height: 60.0,
                            decoration: BoxDecoration(
                              color: Colors.white,
                            ),
                            child: Row(
                              children: [
                                Padding(
                                  padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
                                  child: Center(
                                    child: Container(
                                      width: 60.0,
                                      foregroundDecoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(5.0),
                                        border: Border.all(
                                          color: Colors.blueGrey,
                                          width: 2.0,
                                        ),
                                      ),
                                      child: Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Center(
                                              child: Padding(
                                                padding: const EdgeInsets.only(left: 10.0),
                                                child: TextFormField(
                                                  keyboardType: TextInputType.number,
                                                  controller: hipController,
                                                ),
                                              ),
                                            ),
                                          ),
                                          Container(
                                            height: 38.0,
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.center,
                                              mainAxisAlignment: MainAxisAlignment.center,
                                              children: <Widget>[
                                                Container(
                                                  decoration: BoxDecoration(
                                                    border: Border(
                                                      bottom: BorderSide(
                                                        width: 0.5,
                                                      ),
                                                    ),
                                                  ),
                                                  child: InkWell(
                                                    child: Icon(
                                                      Icons.arrow_drop_up,
                                                      size: 18.0,
                                                    ),
                                                    onTap: () {
                                                      setState(() {
                                                        if (hip < 140) hip++;
                                                        hipController.text = hip.toString();
                                                      });
                                                    },
                                                  ),
                                                ),
                                                InkWell(
                                                  child: Icon(
                                                    Icons.arrow_drop_down,
                                                    size: 18.0,
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      if (hip > 5) hip--;
                                                      hipController.text = hip.toString();
                                                    });
                                                  },
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: Slider(
                                    value: hip.toDouble(),
                                    min: 5,
                                    max: 140,
                                    onChanged: (double newValue) {
                                      setState(() {
                                        hip = newValue.round();
                                        hipController.text = hip.toString();
                                      });
                                    },
                                    activeColor: Color(0xffC5272D),
                                    inactiveColor: Color(0xffF3C5C6),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    Texts('Select Unit'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorHip(1);
                              isHeightCm = true;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                              color: hipCmCard,
                              borderRadius: BorderRadius.circular(3.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 18.0),
                              child: Center(child: Texts('CM')),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorHip(2);
                              isHeightCm = false;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              color: hipFtCard,
                              borderRadius: BorderRadius.circular(3.0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 16.0),
                              child: Center(child: Texts('Ft')),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 35.0,
                    ),
                  ],
                ),
                Container(
                  height: MediaQuery.of(context).size.height * 0.084,
                  width: 350.0,
                  child: SecondaryButton(
                    label: 'CALCULATE',
                    // onTap: () => {
                    //       setState(() {
                    //         print('hiii');
                    //       })
                    //     }
                    onTap: () {
                      setState(() {
                        calculateBodyFat();
                        showTextResult();

                        {
                          Navigator.push(
                            context,
                            FadePage(
                                page: FatResult(
                              bodyFat: bodyFat,
                              fat: fat,
                              textResult: textResult,
                            )),
                          );
                        }
                      });
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
