1 - Layout with Reusable Widget for BMI Calc

input_page.dart

import 'package:flutter/material.dart';

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

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
              child: Row(children: <Widget>[
            ReusableWidget(colour: Color(0xff24263b)),
            ReusableWidget(colour: Color(0xff24263b)),
          ])),
          Expanded(
            child: Row(
              children: <Widget>[
                ReusableWidget(colour: Color(0xff24263b)),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                ReusableWidget(colour: Color(0xff24263b)),
                ReusableWidget(
                  colour: Color(0xff24263b),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class ReusableWidget extends StatelessWidget {
  final Color colour;

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

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