2 - Final Input Page for BMI Calculator Layout

input_page.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  double _sliderValue = 125;
  final Color _bmiRed = Color(0xffe83d66);
  final TextStyle _displayText = TextStyle(
      fontSize: 60.0, fontWeight: FontWeight.w900, letterSpacing: -5.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                ReusableWidget(
                    colour: Color(0xff24263b),
                    child: IconWithLabel(
                        label: 'MALE',
                        icon: Icon(FontAwesomeIcons.mars, size: 70))),
                ReusableWidget(
                  colour: Color(0xff24263b),
                  child: IconWithLabel(
                      label: 'FEMALE',
                      icon: Icon(FontAwesomeIcons.venus, size: 70)),
                )
              ])),
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                ReusableWidget(
                    colour: Color(0xff24263b),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.baseline,
                          textBaseline: TextBaseline.alphabetic,
                          children: <Widget>[
                            Text(
                              _sliderValue.toInt().toString(),
                              style: _displayText,
                            ),
                            Text(
                              'cm',
                            )
                          ],
                        ),
                        Slider(
                          value: _sliderValue,
                          activeColor: _bmiRed,
                          min: 50.0,
                          max: 280.0,
                          onChanged: (myinput) {
                            setState(() => _sliderValue = myinput);
                          },
                        ),
                      ],
                    )),
              ],
            ),
          ),
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                ReusableWidget(
                  colour: Color(0xff24263b),
                  child: PlusMinusWidget(
                    label: 'WEIGHT',
                    value: '24',
                    displayText: _displayText,
                  ),
                ),
                ReusableWidget(
                    colour: Color(0xff24263b),
                    child: PlusMinusWidget(
                      label: 'AGE',
                      value: '13',
                      displayText: _displayText,
                    )),
              ],
            ),
          ),
          RaisedButton(
            child: Text('CALCULATE BMI'),
            color: _bmiRed,
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

class IconWithLabel extends StatelessWidget {
  final String label;
  final Icon icon;
  IconWithLabel({this.label, this.icon});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        icon,
        SizedBox(
          height: 16.0,
        ),
        Text(label),
      ],
    );
  }
}

class PlusMinusWidget extends StatelessWidget {
  final String label;
  final TextStyle displayText;
  final String value;
  PlusMinusWidget({this.label, this.value, @required this.displayText});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(height: 8.0),
        Text(label),
        Text(value, style: displayText),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FloatingActionButton(
              backgroundColor: Color(0xff5d5e6e),
              child: Icon(
                Icons.add,
              ),
            ),
            SizedBox(width: 8.0),
            FloatingActionButton(
              child: Icon(Icons.remove),
              backgroundColor: Color(0xff5d5e6e),
            ),
          ],
        )
      ],
    );
  }
}

class ReusableWidget extends StatelessWidget {
  final Color colour;
  final Widget child;

  ReusableWidget({
    @required this.colour,
    this.child,
  }); // constructor

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          child: child,
          decoration: BoxDecoration(
              color: colour,
              borderRadius: BorderRadius.all(Radius.circular(20.0))),
        ),
      ),
    );
  }
}