After styling the app

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'constants.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // I'm building a material app so using the MaterialApp widget gives us access to all of Flutter's material widgets
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Trajan Pro',
      ),
      // Implements the basic material design visual layout structure
      home: Scaffold(
        backgroundColor: kBackGroundColour,
        // appBar is a property of the Scaffold widget. This widget creates the top app bar
        appBar: AppBar(
          backgroundColor: kDireRed,
          title: Text(
            'MMR CALCULATOR',
            style: kAppBarTextStyle,
          ),
          // By default, in Android, the the Title is left adjusted but I want it centered. I could either style the Text or use the centerTitle appBar property and set it to true
          centerTitle: true,
        ),
        // Empty body (for now)
        body: InputPage(),
      ),
    );
  }
}

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

class _InputPageState extends State<InputPage> {
  // Initialise isError bool variable to false. Used to change style of TextField widget if the user enters a value which isn't allowed.
  bool _isError = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(
          vertical: kVerticalMargin, horizontal: kHorizontalMargin),
      // Column because the TextField widget and button widget will be displayed vertically
      child: Column(
        // Want the widgets in the column to be displayed in the center
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // Widget needed to accept Text input from a user
          TextField(
            // User will only be inputting numbers so we want to make this easier for the user
            keyboardType: TextInputType.number,
            // No ones MMR is more than 4 digits long
            maxLength: 4,
            maxLengthEnforced: true,
            style: TextStyle(
              fontSize: 24,
            ),
            // How the TextField is styled
            decoration: InputDecoration(
              labelText: 'What\'s your MMR?',
              labelStyle: kSecondaryTextStyle,
              errorText: _isError ? 'Enter a number between 0 and 9999' : null,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
            ),
          ),
          // Creating space between the TextField widget and RaisedButton widget
          SizedBox(
            height: kSizedBoxHeight,
          ),
          // Putting RaisedButton widget inside a SizedBox so that I can change the size of the Raised button
          SizedBox(
            // Sets the width to as wide as possible. Parent widget has a margin which is why it doesn't go to the edge
            width: double.infinity,
            height: 40,
            // RaisedButton widget. Currently disabled because onPressed property is null
            child: RaisedButton(
              color: kRadiantGreen,
              onPressed: () {},
              child: Text(
                'SUBMIT',
                style: kButtonTextStyle,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class ResultsPage extends StatefulWidget {
  @override
  _ResultsPageState createState() => _ResultsPageState();
}

class _ResultsPageState extends State<ResultsPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(
          vertical: kVerticalMargin, horizontal: kHorizontalMargin),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You are in the top',
            style: kSecondaryTextStyle,
          ),
          Text(
            '23%',
            style: kPrimaryTextStyle,
          ),
          SizedBox(
            height: kSizedBoxHeight,
          ),
          SizedBox(
            width: double.infinity,
            height: 40,
            child: RaisedButton(
              onPressed: () {},
              color: kRadiantGreen,
              child: Text(
                'BACK',
                style: kButtonTextStyle,
              ),
            ),
          ),
        ],
      ),
    );
  }
}