[Feature/PE1-18] Implementation of the Login Page

lib/login_page/login_credentials.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import './login_form.dart';
+
+// Class for the credential pad on the login page, including the form
+// containing two text inputs and the login button
+class LoginCredentials extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: MediaQuery.of(context).size.height * 0.45,
+      width: MediaQuery.of(context).size.width,
+      decoration: BoxDecoration(
+          //gradient color for the rectangle
+          gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: <Color>[
+                Color.fromARGB(255, 217, 188, 240),
+                Color.fromARGB(255, 237, 210, 240)
+              ]),
+          borderRadius: BorderRadius.only(
+            topLeft: const Radius.circular(25.0),
+            topRight: const Radius.circular(25.0),
+          )),
+      child: Column(
+        mainAxisSize: MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.center,
+        textDirection: TextDirection.ltr,
+        children: <Widget>[
+          Padding(
+            padding: EdgeInsets.fromLTRB(20, 20, 20, 10),
+            child: LoginForm(),
+          ),
+          Padding(
+            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
+            child: Align(
+              alignment: Alignment.centerRight,
+              child: Container(
+                child: Text(
+                  'Forgot password?',
+                  style: TextStyle(decoration: TextDecoration.underline),
+                ),
+              ),
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: 10),
+            child: LoginButton(),
+          ),
+          Text('By Poly Team', textDirection: TextDirection.ltr)
+        ],
+      ),
+    );
+  }
+}
+
+/// Sign up button for the welcome page, use the raised button.
+/// TODO: Replace this (PE1-24)
+class LoginButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      child: Image(
+          height: MediaQuery.of(context).size.height * 0.1,
+          width: MediaQuery.of(context).size.width * 0.8,
+          image: AssetImage('assets/images/PElogin2.png'),
+          fit: BoxFit.fitWidth),
+      onTap: () {
+        //Todo: link it to different page up page
+        print('hi\n');
+      },
+    );
+  }
+}

lib/login_page/login_form.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+
+// Class for the login form consisting of two text inputs
+class LoginForm extends StatefulWidget {
+  @override
+  LoginFormState createState() {
+    return LoginFormState();
+  }
+}
+
+class LoginFormState extends State<LoginForm> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+          color: Color.fromARGB(255, 248, 236, 252),
+          borderRadius: BorderRadius.only(
+            topLeft: const Radius.circular(25.0),
+            topRight: const Radius.circular(25.0),
+            bottomLeft: const Radius.circular(25.0),
+            bottomRight: const Radius.circular(25.0),
+          )),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          Padding(
+            padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
+            child: TextFormField(
+              decoration: InputDecoration(
+                border: UnderlineInputBorder(),
+                labelText: 'Email',
+              ),
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.fromLTRB(20, 10, 20, 20),
+            child: TextFormField(
+              decoration: InputDecoration(
+                border: UnderlineInputBorder(),
+                labelText: 'Password',
+              ),
+              obscureText: true,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/login_page/login_page.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import './login_title.dart';
+import './login_picture.dart';
+import '../widgets/circle_overlay.dart';
+import './login_credentials.dart';
+
+class LoginPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Stack(
+        textDirection: TextDirection.ltr,
+        children: [
+          Positioned(
+            child: CircleOverlays(),
+          ),
+          Positioned(
+            child: LoginCredentials(),
+            bottom: 0,
+          ),
+          Positioned(
+            child: LoginPicture(),
+            bottom: MediaQuery.of(context).size.height * 0.35,
+            left: MediaQuery.of(context).size.width * 0.1,
+          ),
+          Positioned(
+            child: LoginTitle(),
+            left: MediaQuery.of(context).size.width * 0.07,
+            top: MediaQuery.of(context).size.height * 0.07,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/login_page/login_picture.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+
+// Image widget on the login page
+class LoginPicture extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Image(
+      image: AssetImage('assets/images/PEloginImage.png'),
+      fit: BoxFit.contain,
+      height: MediaQuery.of(context).size.height * 0.4,
+      width: MediaQuery.of(context).size.width * 0.8,
+    );
+  }
+}

lib/login_page/login_title.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class LoginTitle extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: MediaQuery.of(context).size.height * 0.2,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        textDirection: TextDirection.ltr,
+        children: [
+          Image(
+            image: AssetImage('assets/images/PElogo2.png'),
+            fit: BoxFit.contain,
+            height: MediaQuery.of(context).size.height * 0.08,
+          ),
+          Text('LOGIN',
+              style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 27,
+                  fontFamily: 'Montserrat'),
+              textDirection: TextDirection.ltr),
+          Text('Welcome back!',
+              style: TextStyle(fontSize: 20, fontFamily: 'Montserrat'),
+              textDirection: TextDirection.ltr),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/circle_overlay.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class CircleOverlays extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: MediaQuery.of(context).size.height,
+      child: Stack(
+        textDirection: TextDirection.ltr,
+        children: [
+          Positioned(
+            child: CircleContainer(
+                assetLocation: 'assets/images/PEcircle2.png',
+                width: 0.6,
+                height: 0.33),
+            left: 0,
+          ),
+          Positioned(
+            child: CircleContainer(
+                assetLocation: 'assets/images/PEcircle1.png',
+                width: 0.6,
+                height: 0.216),
+            right: 0,
+          )
+        ],
+      ),
+    );
+  }
+}
+
+// this class is use to hold the circles
+class CircleContainer extends StatelessWidget {
+  final String assetLocation;
+  final double width;
+  final double height;
+
+  CircleContainer(
+      {Key key,
+      @required this.assetLocation,
+      @required this.width,
+      @required this.height});
+
+  @override
+  Widget build(BuildContext context) {
+    return Image(
+      width: MediaQuery.of(context).size.width * width,
+      height: MediaQuery.of(context).size.height * height,
+      image: AssetImage(assetLocation),
+      fit: BoxFit.contain,
+    );
+  }
+}

pubspec.yaml

@@ -50,9 +50,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/images/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.